ts 환경설정 관련 에러 해결 모음

Parsing error: DeprecationError: originalKeywordKind has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead.

아래 커맨드 설치 후 해결

npm install @typescript-eslint/eslint-plugin --save-dev
npm install @typescript-eslint/parser --save-dev

https://stackoverflow.com/questions/76996326/parsing-error-deprecationerror-originalkeywordkind-has-been-deprecated-since

This rule requires the strictNullChecks compiler option to be turned on to function correctly

해결 방법: .eslintrc 파일 rules에 코드 추가

"@typescript-eslint/strict-boolean-expressions": "warn"

tsconfig "strictNullChecks": true로 바꿔주기

근데 나는 이렇게 안 했고 그냥 strict-boolean-expressions이랑 nullcheck 다 꺼서 해결함(근데 왠만하면 위에 방법대로 하기.. 이건 시간 없고 급해서 다 꺼버림)

https://stackoverflow.com/questions/72792450/how-do-i-disable-tslint-rule-this-rule-requires-the-strictnullchecks-compiler

'children' is missing in props validation

props는 정상적으로 넘기고 받아지지만 esLint에 걸리는 문제

ts 사용 중이기 때문에 eslint에 "react/prop-types": "off" 추가 후 해결

아래는 리액트 사용시 정석적인 해결 방법 아 물론 ts 쓸 때도 해도는 되는데 굳이? 그냥 설정 꺼주면 된다
https://haerim95.tistory.com/41

npm start로 실행 시에 code: 'ERR_OSSL_EVP_UNSUPPORTED' 뜨는 문제

해결 방법 : "start": "react-scripts start" 를 "start": "react-scripts --openssl-legacy-provider start" 으로 변경

OpenSSL 3.0에서 허용되지 않는 알고리즘이나 키 사이즈를 지금 내가 사용하고 있는 application이나 module이 사용하려고 해서 일어나는 오류임. 임시적으로 해당 restriction 해결을 위해 script를 바꿔준다.

밑 사이트에는 build도 바꿔주라고 나와있지만 build script는 따로 변경하지 않았음. start시에 생기는 오류라 start만 바꿔줘도 충분했다

https://roytuts.com/how-to-fix-err_ossl_evp_unsupported-in-react-js-application/

localstorage is not defined

이거 보고 어이없었음 로컬스토리지가 없긴 왜 없어? 이랬는데

"env": {
        "es2021": true,
        "node": true,
        "browser": true
    },

eslint env에 browser: true 설정 안 해줘서 그런거였다..ㅋㅋ

그리고 참고로 eslint 쓸 때 airbnb-base 깔면 안 된다 리액트 관련 규칙 안 들어있어서 에러 폭탄 맞음 ..^^ 구분 못하고 깔았다가 뒤집어져서 uninstall함

Unable to resolve path to module

해결 방법 : eslintrc에 해당 코드 추가

{
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  ...
}

https://stackoverflow.com/questions/55198502/using-eslint-with-typescript-unable-to-resolve-path-to-module

React is not defined

해결 방법: @types/react를 설치한다 ... 그냥 바보임 어떻게 이걸 까먹어?

JSON.parse: Expected double-quoted property name in JSON

혹은 Unexpected top-level property "prettier/prettier"

eslint 설정이 잘못 되어있거나 eslint config prettier를 다운 안 했을 시에도 일어난다고 되어있는데 해당사항 없었다.

해결 방법: eslintrc "extends"에 "plugin:prettier/recommended" 추가. 그냥 prettier이라고만 해놓으면 오류난당

A form label must be associated with a control --eslint

eslint rules에 해당 코드 추가

"jsx-a11y/label-has-associated-control": ["error", {
        "required": {
          "some": ["nesting", "id"]
        }
      }],
      "jsx-a11y/label-has-for": ["error", {
        "required": {
          "some": ["nesting", "id"]
        }
      }]

그리고 label과 input id를 꼭 맞춰줄 것!

<label htmlFor= "some_id"> <input id = "some_id" /> </label>

https://stackoverflow.com/questions/54446655/eslint-rule-for-label

에러 날 때마다 추가 예정