cra-bundle-analyzer 실행시 에러
613
작성한 질문수 1
안녕하세요 ! 좋은 강의 구매해서 잘 듣고 있습니다.
다름이 아니라 Part1 1-8 강의에서 자꾸만 다음과 같은 에러가 나서 여쭙니다
package.json 에는 type:module 이 없었고,
C:\Users\nahyu\OneDrive\바탕 화면\잡다한 개발\뉴로클 과제\lecture-1\node_modules\chalk\source\index.js
에 .cjs로 끝나는 파일도 없었습니다
찾아봤는데 감이 오지 않아 여쭙니다 ㅠㅠ
답변 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
강의 영상에는 빠른 시일내에 관련 내용을 업데이트 하겠습니다.
그리고 강의 보완에 참고하기 위해,
위 내용을 해보시고 잘 되는지, 잘 안 된다면 어떻게 안 되는지를 답변으로 공유해주시면 감사하겠습니다.
답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)
0
안녕하세요 ! 상세한 답변 진심으로 감사합니다 ㅠㅠ
node_modules 폴더에 cra-bundle-analyzer 폴더 확인하고
node ./node_modules/cra-bundle-analyzer/src/index.js
명령어를 실행했습니다
동일한 에러가 발생합니다.
아직 주니어라 웹팩이 익숙하지 않아 강의 업데이트 기다리고 있겠습니다ㅠ ㅠ
감사합니다 !
1
리린님, 다시 자세히 살펴봤는데요, 제가 조금 잘못 알려드린 것 같습니다.
다시 정확히 정리해드리겠습니다.
우선 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을 올리거나 추가 영상을 게시하겠습니다.
bundle analyzer 에 대한 질문이 있습니다.
0
118
2
Cannot find module serve 에러
1
126
1
성능 탭에서 소요시간이 안보입니다
0
230
2
이미지 CDN 만드는 방법
0
474
1
Performance FPS 탭이 안보여요.
1
819
1
CPU throttling이 뭔가요?
0
1127
1
default export가 아닌 named export일 때 lazy사용법
1
1079
1
lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다
1
593
1
network 캐싱에 대해서 질문 있습니다!
1
430
1
vue project에서 chrome performance tab 확인하기
1
462
1
node version으로 인한 오류
4
1240
1
강의 자막
1
961
2
번들파일과 병목현상 질문
2
402
1
webpack-bundle-analyzer 질문
1
790
1
이미지 프리로딩 질문
1
389
1
이미지 최적화 활용
1
589
1
강력 새로고침
1
331
1
Suspense 관련해서 질문드립니다
2
365
1
config-overrides cant resolve path
1
369
1
이미지 preload 컴포넌트 preload 차이 질문드립니다.
1
617
1
custom react 환경에서 node_modules chunk 분리
1
384
1
removeSpeical 함수를 줄여야겠다고 하는 이유!
1
291
1
Factory pattern에 대해서 궁금한 점이 있습니다
2
377
2
텍스트 압축 방식에 대해 질문이 있습니다
2
959
1