[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

 

 

 

 

함께 보면 좋을 내용

Rendering: Edge and Node.js Runtimes | Next.js

 

Rendering: Edge and Node.js Runtimes | Next.js

 

 

Next.js 14.0.3 fails to build when using `antd` due to "SyntaxError: Cannot use import statement outside a module" · Issue #588