코드노예

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

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

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로 다운 그레이드 하는 것도 수월하지 않고.. 근본적인 해결책은 아니다 싶었습니다.

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

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

react 와 @testing-library/react 간의 호환성 문제였기 때문에, 위의 4개 모듈 중에 어떤 모듈이 @testing-library/react 를 설치하는지 확인해봐야 겠습니다.

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

temp 폴더에 설치한 cra-template 모듈에 있는 template.json 파일을 열고 @testing-library/react의 버전을 편집합니다. (temp/node_modules/cra-template/template.json)

npm 사이트에서 확인해 본 결과, 현재16.2.0 이 최신이네요.. 

업데이트 하는 김에, 다른 dependencies들의 버전도 모두 최신버전으로 올려주었습니다. (아래 캡쳐 화면 참고)

cra-template 모듈을 편집했다면, 이제 실제 react 프로젝트를 생성하면 되는데, 생성시 template을 우리가 편집한 cra-tempate 모듈을 바라볼 수 있게 옵션으로 지정해 줍니다.

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

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

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

결론적으로 cra-template 모듈을 관리하는 facebook 측에서 dependencies를 업데이트 해줘야 해결이 되는 문제인데.. facebook 에서는 정책을 변경해서, react 프로젝트 생성 시, framework와 함께 프로젝트를 생성하는 방법을 권장하고 있습니다. 

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

내용을 간략히 요약하자면, 웹 사이트 혹은 웹 앱을 개발할 때, react 를 이용하는 framework을 사용하는 것을 권장하니, 이제부터는 create-react-app은 대신, create-next-app 이나 create-remix 등의 명령어를 이용해서 프로젝트를 생성하라고 하네요..

여튼 아직 create-react-app을 필요로 하시는 분들을 위해 작성한 포스팅이니, 잘 활용하시면 좋겠습니다.

요약

1. react 19는 create-react-app 으로 프로젝트 생성시 에러가 발생함

2. 이유는 create-react-app 에서 참조하는 모듈 cra-template 에서, react 18을 참조하는 오래된 라이브러리를 참조하고 있기 때문임

3. 이를 우회하기 위해서, cra-template 을 다운로드 해서, 참조 모듈의 버전을 올려주고,

4. create-react-app 명령어 실행시 편집한 버전의 cra-template 경로를 template 옵션으로 지정해 주면 됨