팀 프로젝트에서 stompjs를 설치하는 도중에 다음과 같은 에러가 발생했다.
무슨 얘기인지 찾아보니 'gati-app'을 실행하는 도중 `@react-native-community/async-storage' 패키지가 react 16.8 버전에 의존하고 있어서 root 프로젝트의 react 버전(18.0)과 안 맞다는 얘기였다.
처음에는 약간 땜빵(?)의 느낌인 --force와
버전 간의 차이를 무시하는 --legacy-peer-deps를 명령어 뒤에 추가해서 설치를 진행했다.
하지만 결과적으로는 설치도 제대로 안 되고 멀쩡하던 앱이 오류로 인해 렌더링조차 안 되는 사태가 발생했다.
근본 원인을 해결하고자 추가로 해결책을 조사하면서 아래 내용들을 시도해보았다.
최종 성공한 해결책은 맨 밑에 있다.
시도해본 것들 (2가지)
1. npm 패키지를 특정 버전으로 설치
에러 해결 중 아래와 같은 에러 메시지가 떴는데 참고 자료의 방법을 사용해 해결했다.
The development server returned response error code: 500
node 17버전부터 발생하는 에러여서 16.으로 시작하는 버전으로 바꿔줘야 한다.
참고 자료를 보면서 진행해보자.
(exe 다운 받는 건 다음 이미지 참고)
- 현재 node 버전 확인 (아마 17 버전 이상일 것)
node -v
- 설치 가능한 node 버전 확인
nvm list available
- 16.~으로 시작하는 특정 버전 설치
nvm install 16.~(nvm install 원하는 버전 - 16.~ 중 최신 버전으로 선택했다)
- 리스트로 확인 (current가 16 버전이 아닌 것에 붙어 있을 것이다)
nvm list
- 16 버전을 사용하겠다고 명시 (current가 16.~ 으로 바뀐다)
nvm use 16.~
- 다시 node 버전 확인
node -v(16으로 시작하는 버전이 뜨면 성공)
2. npm-check-updates 라이브러리 사용하기
참고 자료:
https://velog.io/@seoltang/update-versions-of-package-dependencies
프로젝트 내의 패키지를 모두 최신 버전으로 업데이트 해주는 라이브러리이다.
설치 및 사용법
- npm-check-updates 라이브러리 설치
npm i -g npm-check-updates- ncu 명령어 실행
ncu -u- (잘 됐는지 테스트) npm install 실행해보기 => 실패
npm install설치 시 global로 하기 때문에 맨 처음의 에러는 잠깐 안 나는 걸 볼 수 있다.
이 방법을 쓰고도 안 됐던 이유는 처음의 에러가 '모든 패키지를 최신 버전으로 안 써서'가 아니라 '패키지들이 서로 다른 react 버전에 의존해서' 발생했기 때문이다.
최종 해결책 (성공)
위의 방법으로 시도하던 중 에러 문구 중에 다음 문구를 발견했다.
this package itself specifies a
mainmodule field that could not be resolved ...
구글에 'specifies a main module' 까지만 검색하니 다음 자료가 나왔다.
stackoverflow 참고 자료
첫 번째 답변을 시도 후 세 번째 답변을 시도해보자 문제를 해결할 수 있었다.
I was unable to resolve the issue with Jogi's answer(첫 번째 답변) alone, but after adding 'cjs' to the array, as recommended in the linked changelog, my app was able to start up as expected.
'(첫 번째 답변대로 했을 때는 해결할 수 없었으나) 'cjs'를 metro.config.js 파일에 추가했을 때 앱이 예상대로 동작했다'는 답변이었다.
수정해야 하는 metro.config.js 파일을 생성하려고 보니 이미 다른 팀원이 생성하거나 만들었던 파일이어서 수정만 진행했다.
sourceExts 키에 ...sourceExts, 'svg' 다음에 ts, tsx, jsx, js, cjs 부분을 추가했더니 해결되었다.
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig();
return {
transformer: {
babelTransformerPath: require.resolve('react-native-svg-transformer'),
},
resolver: {
assetExts: assetExts.filter(ext => ext !== 'svg'),
sourceExts: [...sourceExts, 'svg', 'ts', 'tsx', 'jsx', ' js', 'cjs'], // ** 여기!
},
};
})();해결의 핵심 포인트는 cjs 확장자를 포함하는 것이었던 것 같다.
npm ERR이 끝도 없이 떴는데 config 파일을 설정하니 문제를 해결할 수 있었다 👏
