오류! 설치 후 프로젝트에서 코드 수정 시 오류

프로젝트를 생성하고 "yarn start"로 프로그램을 실행해 봅니다.

실행 후 예를 들면 src/App.js 파일을 수정하면 브라우저에 아래와 같은 오류 메시지가 표시됩니다.

create-react-app과 yarn이 충돌해서 발생하는 현상입니다.

프로젝트에서는 아래와 같은 메시지가 출력되네요.

Failed to compile.

[eslint] Failed to load config "react-app" to extend from.
Referenced from: /home/user/programming/react/basic/package.json
ERROR in [eslint] Failed to load config "react-app" to extend from.
Referenced from: /home/user/programming/react/basic/package.json

webpack compiled with 1 error

 

위 문제를 해결하기 위해 단계별로 진행해 보겠습니다.

 

1. 종속성 옵션 실행

프로그램 실행을 종료 후 아래처럼 종속성을 강제로 실행해 줍니다.

$ yarn add -D eslint-config-react-app
...
$ yarn start

 

2. ".yarnrc.yml" 파일 추가

동일하게 오류가 발생하면 이제 프로젝트 루트에 ".yarnrc.yml"을 추가해 줍니다.

 

.yarnrc.yml

packageExtensions:
  react-scripts@*:
    peerDependencies:
      eslint-config-react-app: '*'

 

 

3. 캐시 삭제

yanrc.yml 추가해도 동일한 현상이 발생하면 아래처럼 캐시 내용을 삭제 후 재실행해 줍니다.

$ yarn cache clean
...
$ yarn install
...
$ yarn start

 

뭐 저의 경우에는 여기까지 했는데도 오류가 발생합니다.

그런데, 프로젝트 하위 폴더에 .yarn/ 폴더와 .yarnrc.yml 파일이 생성되어 있어서 삭제한 다음 실행하니 정상동작하네요.

$ ls -al ../
.yarn/
.yarnrc.yml
app1/
$ rm -rf ../.yarn/
$ rm .yarnrc.yml
$ 
$ yarn set version stable
$ yarn install
$ yarn start