인프런 커뮤니티 질문&답변
작성한 질문수
cra-bundle-analyzer 실행시 에러
작성
·
568
답변 1
1
안녕하세요, 리린님,
cra-bundle-analyzer에 대해서 질문을 주셨는데요,
말씀하신대로 cra-bundle-analzyer 를 실행하는데 있어서 에러가 발생하는 것 같습니다.
갑자기 왜 에러가 발생하는지는 모르겠으나, 에러 내용을 보면 module type(esm, commonjs)에 대한 에러로 보입니다.
해결 방법으로는
첫 번째로, cra-bundle-analzyer가 아닌 webpack-bundle-analyzer를 직접 사용하는 방법이 있고,
두 번째로, cra-bundle-analzyer를 npx가 아닌 직접 모듈을 찾아 node로 실행하는 방법입니다.
첫 번째 방법은 직접 webpack config를 커스텀 해야하기 때문에 복잡하실 수도 있으니 두 번째 방법으로 알려드리겠습니다.
(사실 그렇게 어렵지는 않은데, 설치하고 설정해야할 것이 좀 있어서요)
$ npm install cra-bundle-analyzer
로 해당 모듈을 설치하면 node_modules 폴더에 설치가 되는데요,
설치된 모듈을 직접 찾아들어가 node로 실행해주시면 됩니다.
즉, 다음과 같이 프로젝트 폴더에서 명령어를 실행하시면 됩니다.
$ node ./node_modules/cra-bundle-analyzer/src/index.js
강의 영상에는 빠른 시일내에 관련 내용을 업데이트 하겠습니다.
그리고 강의 보완에 참고하기 위해,
위 내용을 해보시고 잘 되는지, 잘 안 된다면 어떻게 안 되는지를 답변으로 공유해주시면 감사하겠습니다.
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
리린님, 다시 자세히 살펴봤는데요, 제가 조금 잘못 알려드린 것 같습니다.
다시 정확히 정리해드리겠습니다.
우선 cra-bundle-analyzer 는 chalk 라는 라이브러리에 디펜던시를 갖습니다.
<node_modules/cra-bundle-analyzer/package.json>
그런데, 자체적으로 chalk 모듈을 가지고 있는게 아니라 peerDependencies로 가지고 있습니다.
즉, 프로젝트 레벨에서 해당 모듈이 설치되어야 합니다. (해당 패키지 내부가 아니라)
그래서 npm install 시에 해당 디펜던시들을 참조하여 chalk 패키지를 설치하게 되는데,
cra-bundle-analyzer에 버전이 3버전 보다 높은 버전으로 설치하도록 명시되어 있어서 그냥 가장 최신 버전인 5버전의 chalk 모듈을 설치하게됩니다.
이 때, chalk 모듈의 5.0.0 버전의 모듈 방식이 esm으로 되어 있어서 cra-bundle-analyzer에서 chalk 모듈을 로드 할 때 commonjs 방식으로 불러오면서 에러가 발생하는 걸로 추정됩니다. (https://github.com/chalk/chalk/releases/tag/v5.0.0)
해결책은 간단합니다.
chalk 모듈을 commonjs로 불러올 수 있도록 하위 버전(5.0.0 아래의 버전은 4.1.2입니다)으로 재설치해주시면 됩니다.
$ npm install --save-dev chalk@4.1.2
그리고 나서 다시 cra-bundle-analyzer를 실행하시면 됩니다.
$ npx cra-bundle-analyzer
해당 이슈에 대해서는 cra-bundle-analyzer 모듈을 업데이트할 수 있도록 PR을 올리거나 추가 영상을 게시하겠습니다.
안녕하세요 ! 상세한 답변 진심으로 감사합니다 ㅠㅠ
node_modules 폴더에 cra-bundle-analyzer 폴더 확인하고
node ./node_modules/cra-bundle-analyzer/src/index.js
명령어를 실행했습니다
동일한 에러가 발생합니다.
아직 주니어라 웹팩이 익숙하지 않아 강의 업데이트 기다리고 있겠습니다ㅠ ㅠ
감사합니다 !