[React]CRA 세팅 Failed to compile 에러 (eslint, prettier)

MEGAFOX 팀 프로젝트 - 초기세팅 을 참고하여 개인 포트폴리오를 위한 새로운 CRA 프로젝트를 생성했다.

그 짧은 시간동안 react-router의 업데이트(v5 → v6)가 있어서 이번 프로젝트에 적용해보기로 했다.

 

그렇게 세팅을 하고 npm start !!

 

 

prettier 플러그인 로드에 실패했다. eslint-plugin-prettier 모듈을 찾을 수 없다구.

.eslintrc에 사용하겠다고 적어두었는데 찾을 수가 없네?

 

CRA에는 eslint가 내장 되어있지만, 추가설정을 위한 package는 따로 설치해야한다.

npm install -D prettier eslint-config-prettier eslint-plugin-prettier

 

 

성공과 동시에

네! 다음 Error😃

 

Failed to compile

Error while loading rule 'prettier/prettier': context.getPhysicalFilename is not a function
Occurred while linting /Users/dan/Desktop/dan_dev/dand_portfolio/src/index.js`

 

그래도 우린 구면이잖아? MEGAFOX CRA 초기세팅 에러

하지만 키워드와 명령어만 알았지 좀 더 깊게는 생각 안하고 지나갔었나보다. 

해결책이 바로바로 안나온다.

 

 

또 다시!

패키지 간의 종속성을 찾아서

 

참고 : Charles Stover - Resolving Prettier + React

 

위 블로그를 참고하여 일부 의역했습니다.

 

React 프로젝트는 빌드 시 react-script를 사용한다.
...
yarn.lock에서 react-scripts는  eslint@^7.11.0을 요구하는 것을 볼 수 있다.
그러나 종속성을 lock했으므로 마지막으로 설치된 버전을 사용한다.

당신은 두 개의 설치 파일을 확인 할 수 있다.

 

 

package-lock.json 확인

...
    "eslint": {
      "version": "7.20.0",
...
    "eslint-plugin-prettier": {
      "version": "4.0.0",
...

eslint@^7.20.0

eslint-plugin-prettier@^4.0.0

 

 

yarn.lock 확인

react-script는 eslint@^7.11.0에 의존

 

eslint명령으로 호출할 때, package.json에서 설치된 버전을 사용합니다 .
그러나 react-scripts가 eslint를 호출 할 때, 가장 react-scripts 마지막에 성공적으로 설치된 react-scripts와 함께 사용됩니다. - "locked in"상태인.
이 버전은 Prettier plugin과 호환되지 않으므로 실패됩니다.
...
문제 해결을 위해여 react-scripts의 종속성을 강제로 업데이트 할 수 있다.
Yarn은 ESLint를 업그레이드할 뿐만 아니라 모든 종속성에 대한 ESLint도 업그레이드합니다.
따라서 이제 최신 버전의 ESLint를 사용하고 성공합니다.

 

yarn install
yarn upgrade -R eslint

 

 

다시 npm start !!

🥲

그래도 이건 package 버전 문제는 아니니까..

오류 해결!