코드노예

오랜만에 리액트 앱을 개발할 일이 생겨서 체크해 보다가 이상한 이슈를 만나게 되었습니다. 

대략 아래와 같은 에러 메시지가 나옵니다.

npm ERR! node_modules/react
npm ERR!   react@"^19.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

`npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed

내용을 살펴보면.. react 19를 설치했는데, @testing-library/react@13.4.0 은 react 18을 필요로 한다.. 는 이야기네요..

stackoverflow 나 facebook github 이슈에 리포팅 되어 있는 이슈지만 해결책은 react 18로 다운 그레이드하라는 식의 이야기 밖에 없네요.. 사실 react 18로 다운 그레이드 하는 것도 수월하지 않고.. 근본적인 해결책은 아니다 싶었습니다.

포스팅하고 나서 알게 된 사실인데.. react 공식 홈페이지에서 새 프로젝트 시작할 때, create-react-app 이 아닌 다른 명령어를 쓰라고 설명을 해 놓았네요..

https://react.dev/learn/start-a-new-react-project

문제 해결을 위해 원인이 무엇인가에 대해서 살펴 보았습니다..

먼저 npx로 생성하는 리액트 앱의 dependencies를 살펴보면, "cra-template", "react", "react-dom", "react-scripts" 이렇게 4가지로 나오네요..

react 와 @testing-library/react 간의 호환성 문제였기 때문에, 어떤 모듈이 testing-library/react 을 설치하는지 확인해 보았습니다. 

확인을 위해 temp 폴더를 생성해서 각각의 모듈을 설치해서 dependencies를 살펴보았습니다. 그 결과 cra-template 모듈의 template.json 파일에서 @testing-library들이 포함되어 있는 것을 확인하였습니다.

해당 파일에서 버전을 편집합니다. 업데이트 하는 김에, 다른 dependencies들도 모두 최신으로 해주었습니다.

이제 프로젝트를 생성하는데, template을 우리가 편집한 모듈을 바라보게 옵션으로 지정합니다.

아래와 같은 폴더 구조에서, Projects/react 위치에서 다음과 같이 template 옵션을 지정하여 실행합니다.

npx create-react-app my-app --template file:./temp/node_modules/cra-template

그러면 오류 없이 프로젝트가 잘 생성됩니다.

결론적으로 facebook 에서 cra-template을 업데이트 해줘야 해결이 되는 문제인데.. 언제 업데이트가 될지 알 수 없으니.. 임시로 template을 지정해서 생성하는 방법을 사용하면 됩니다.