코딩일상
[ERROR] antd 라이브러리 컴파일 관련 에러 outside a module 본문
에러내용
./node_modules/@ant-design/cssinjs/es/Cache.js Module not found: Can't resolve x ./node_modules/@ant-design/cssinjs/es/Cache.js Module not found: Can't resolve '@babel/runtime/helpers/esm/defineProperty' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./node_modules/@ant-design/cssinjs/es/StyleContext.js ./node_modules/@ant-design/cssinjs/es/index.js ./node_modules/antd/es/config-provider/index.js __barrel_optimize__?names=ConfigProvider!=!./node_modules/antd/es/index.js ./src/pages/_app.tsx ./node_modules/@ant-design/cssinjs/es/Keyframes.js Module not found: Can't resolve '@babel/runtime/helpers/esm/createClass' https://nextjs.org/docs/messages/module-not-found Import trace for requested module: ./node_modules/@ant-design/cssinjs/es/index.js ./node_modules/antd/es/config-provider/index.js __barrel_optimize__?names=ConfigProvider!=!./node_modules/antd/es/index.js ./src/pages/_app.tsx > Build failed because of webpack errors
뭔가.. antd 라이브리들에 만들어진 파일들이 ES6 모듈로 구성이 되어있는데
Next.js는 이를 올바르게 처리 하지 못해 문제가 발생하는거 같아 보였다.
찾아보니..
Next.js는 기본적으로 node_modules 폴더 내의 패키지를 트랜스파일하지 않습니다.
이는 성능 최적화를 위해서이며, 대부분의 패키지는 CommonJS 형식으로 배포되므로 Node.js 환경에서 직접 실행할 수 있기 때문입니다. 그러나 일부 패키지는 ES6 모듈 형식으로 배포되며, 이 경우 Next.js가 이를 올바르게 처리하지 못해 문제가 발생할 수 있습니다.
해결법
next.config.js에 아래의 설정을 하여 바밸을 통해 트랜스파일이 될수있게 설정을 하였다
transpilePackages 옵션을 이용하여 지정왼 패키지들을 Babel을 통해 해결하게 하였다
transpilePackages: [
// antd & deps
"@ant-design",
"@rc-component",
"antd",
"rc-cascader",
"rc-checkbox",
"rc-collapse",
"rc-dialog",
"rc-drawer",
"rc-dropdown",
"rc-field-form",
"rc-image",
"rc-input",
"rc-input-number",
"rc-mentions",
"rc-menu",
"rc-motion",
"rc-notification",
"rc-pagination",
"rc-picker",
"rc-progress",
"rc-rate",
"rc-resize-observer",
"rc-segmented",
"rc-select",
"rc-slider",
"rc-steps",
"rc-switch",
"rc-table",
"rc-tabs",
"rc-textarea",
"rc-tooltip",
"rc-tree",
"rc-tree-select",
"rc-upload",
"rc-util",
],next.config.js Options: transpilePackages | Next.js
Automatically transpile and bundle dependencies from local packages (like monorepos) or from external dependencies (`node_modules`).
nextjs.org
함께 보면 좋을 내용
Rendering: Edge and Node.js Runtimes | Next.js
Learn about the switchable runtimes (Edge and Node.js) in Next.js.
nextjs.org
Rendering: Edge and Node.js Runtimes | Next.js
Learn about the switchable runtimes (Edge and Node.js) in Next.js.
nextjs.org
Next.js 14.0.3 fails to build when using `antd` due to "SyntaxError: Cannot use import statement outside a module" · Issue #588
Link to the code that reproduces this issue https://github.com/victorandree/next.js14.0.3-antd4-reproduction To Reproduce Install antd when using Next.js 14.0.3 Use a component (e.g. <Spin />) Try ...
github.com