[React] ERROR in Plugin "react" was conflicted between and "BaseConfig"

[React] ERROR in Plugin 'react' was conflicted between 에러

최근에 리액트 개발환경 구현을 다시 하면서 또 다시 이 문구를 맞닥뜨렸다.

다른 점이 있다면 이번 에러는 조금 더 길었다는 것

 

처음에는 앞 주절이 같아서 위의 링크와 같은 방식을 취했다.

eslint-config-react-app을 재설치했는데 해결이 되지 않았다.

 

다시 에러 문장을 자세히 봤는데 다음 키워드가 보였다.

and

대충 앞 뒤로 비슷한 경로가 있고 두 파일 사이에서 충돌이 일어난다는 것 같았다.

 

yarn dedupe​

yarn dedupe 범위가 겹치는 종속 항목을 중복 제거합니다.

 

이 키워드를 이용해서 중복 제거를 하고 다시 yarn start 해주었다.

문제가 해결되었다.

---

참고

Create-react-app - ERROR in Plugin "react" was conflicted between ".eslintrc.json" and "BaseConfig"

 

 

---

문제가 해결된 듯 보이더니 또 같은 에러가 발생했다.

 

윈도우 환경에서는 파일 경로를 바꿔보라는 해결책이 있었는데

나는 mac 유저라 도움이 되지 않았다.

 

구글링 결과

 

yarn을 사용하는 유저들에게 가끔 나타나는 문제인 것 같았다.

그리 유명하지 않아 해결책이 많지 않다.

 

yarn을 마이그레이션하면 해결된다.

 

Migration

yarn migration 공식 문서

yarn2와 함께 PnP(Plug'n'Play)를 적용해보자. (feat. Typescript)

migration에 대한 설명이 잘 되어있는 블로그

 

migration 하는 과정

 

먼저 프로젝트의 경로로 이동한다.

react 폴더를 사용하는 과정에서 문제가 생겼다고 가정해보자.

cd react

berry 버전을 설정한다.

yarn set version berry

여기서부터는 내가 에러를 수정하기 위해 실행한 방법이다.

∙ .npmrc 파일이 있다면 .yarnrc.yml로 전환해준다.
   - 나는 .npmrc 파일이 없었고 .yarnrc.yml 파일만 있어 생략했다.
∙ package.lock.json 파일을 제거한다.
   - 이 역시 없어서 생략했다.
∙ node_modules 폴더 제거
∙ pakage.json의 eslintConfig 코드 제거 후 .eslintrc.json 파일로 빼기

yarn install

 

.gitignore 파일에 다음을 추가해준다.

.yarn/*
!.yarn/cache
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/sdks
!.yarn/versions

 

여기까지 온 후로 다시 yarn start 해봤더니 다음 에러가 나왔다.

ESLint configuration in .eslintrc.json is invalid:
	- Unexpected top-level property "eslintConfig".

앞 전에 만든 .eslintrc.json 파일의 코드를 모두 주석처리 했다.

문제가 해결됐다.

 

다만 내가 사용한 마이그레이션 방법을 이용하면 node_modules를 이용하지 않게 된다.

나는 코린이라 상관 없지만 혹시 원치 않는다면 고려해보자.