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

[victorandree]

Link to the code that reproduces this issue

https://github.com/victorandree/next.js14.0.3-antd4-reproduction

To Reproduce

1. Install antd when using Next.js 14.0.3
2. Use a component (e.g. <Spin />)
3. Try to build the app

Note: This issue exists both with antd@4 and antd@5. However, I originally discovered and reproduced the issue with antd@4, because my organization is still using this version. The reproduction uses antd@4, but updating to [email protected] (the latest version as of Nov 23, 2023) still causes the same issue.

Current vs. Expected behavior

The build will fail with an error message like the following:

$ npm run build

> build
> next build

 ✓ Linting and checking validity of types
   ▲ Next.js 14.0.4-canary.11

 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Collecting page data  ./next.js14.0.3-antd4-reproduction/node_modules/antd/es/spin/index.js:1
import _extends from "@babel/runtime/helpers/esm/extends";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1153:20)
    at Module._compile (node:internal/modules/cjs/loader:1197:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1287:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at mod.require (/next.js14.0.3-antd4-reproduction/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:130:18)
    at 9 (/next.js14.0.3-antd4-reproduction/.next/server/pages/index.js:1:742)

> Build error occurred
Error: Failed to collect page data for /
    at /next.js14.0.3-antd4-reproduction/node_modules/next/dist/build/utils.js:1217:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.6.0: Wed Oct  4 21:26:23 PDT 2023; root:xnu-8796.141.3.701.17~4/RELEASE_ARM64_T6000
Binaries:
  Node: 20.5.1
  npm: 9.8.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4-canary.11
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

SWC transpilation

Additional context

I am 99% sure that this is caused by https://github.com/vercel/next.js/pull/57968, as that PR changed antd imports to es from lib, presumably without also making sure these files are transpiled correctly.

[nejcet]

+1

[sid-tmbill]

+1

[CatalinScaesteanu]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js.

These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

[raulmarindev]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js.

These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?

[raulmarindev]

There seems to be a PR to fix this: https://github.com/vercel/next.js/pull/58992

[ldeveber]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js. These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?

I tried this and it worked for me! However I had to update the list because we apparently use different ant components :)

This is the full list needed:

  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",
  ],

[abbaty48]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js. These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

@CatalinScaesteanu Hi, I tried this but still get the error. Did you change anything else?

I tried this and it worked for me! However I had to update the list because we apparently use different ant components :)

This is the full list needed:

  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",
  ],

Nice one

[Atalus]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js.

These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

You saved my life!!

[behroodrzdr]

I had the same issue during an upgrade. I've solved the issue by using the transpiledModules feature in next.config.js.

These were the required changes for my project, all antd related: transpilePackages: [ 'antd', '@ant-design', 'rc-util', 'rc-pagination', 'rc-picker', 'rc-notification', 'rc-tooltip' ]

I had the same issue and it has been fixed by adding this to the next.config.js.Thanks.

[huozhi]

Closing this as the issue is fixed in the nextjs versions same as or above 14.0.4

[romelgomez]

Hi, @huozhi

In my project can't update NextJS to any version after 14.0.2, can you please provide more info on how to remove this build error, thanks.

up                                                 1 ↵ rg@romels-MacBook-Pro
yarn run v1.22.21
$ npx npm-check-updates -u
Using yarn
Upgrading /Users/rg/Desktop/projects/chevere/package.json
[====================] 38/38 100%

 @testing-library/jest-dom   ^6.4.1  →   ^6.4.2
 @types/react               18.2.51  →  18.2.54
 antd                       ^5.13.3  →  ^5.14.0
 next                        14.0.2  →   14.1.0

Run yarn install to install new versions.
✨  Done in 5.07s.
yarn install v1.22.21
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > @testing-library/[email protected]" has incorrect peer dependency "react@^16.9.0 || ^17.0.0".
[4/4] 🔨  Building fresh packages...

success Saved lockfile.
✨  Done in 14.57s.
yarn run v1.22.21
$ next build
   ▲ Next.js 14.1.0
   - Environments: .env.local


./src/components/sign-up/index.tsx
98:21  Warning: Using `<img>` could result in slower LCP and higher bandwidth. Consider using `<Image />` from `next/image` to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element  @next/next/no-img-element

./src/context/hooks/use-publication.hook.tsx
118:6  Warning: React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps
147:6  Warning: React Hook useCallback has a missing dependency: 'createPublication'. Either include it or remove the dependency array.  react-hooks/exhaustive-deps

./src/context/hooks/use-query-entry.hook.tsx
64:6  Warning: React Hook useEffect has missing dependencies: 'facetName' and 'findNodePath'. Either include them or remove the dependency array. If 'setFacetEntry' needs the current value of 'facetName', you can also switch to useReducer instead of useState and read 'facetName' in the reducer.  react-hooks/exhaustive-deps

./src/providers/ApolloProvider.tsx
53:6  Warning: React Hook useMemo has an unnecessary dependency: 'httpLink'. Either exclude it or remove the dependency array. Outer scope values like 'httpLink' aren't valid dependencies because mutating them doesn't re-render the component.  react-hooks/exhaustive-deps

info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
 ✓ Linting and checking validity of types    
   Creating an optimized production build ...
 ✓ Compiled successfully
unhandledRejection /Users/rg/Desktop/projects/chevere/node_modules/@ant-design/icons/es/components/Context.js:1
import { createContext } from 'react';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/Users/rg/Desktop/projects/chevere/node_modules/next/dist/server/require-hook.js:65:28)
    at require (node:internal/modules/helpers:176:18)
    at 8333 (/Users/rg/Desktop/projects/chevere/.next/server/pages/_app.js:1:3611) {
  type: 'SyntaxError'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[cjy4979]

关闭此问题，因为该问题已在与 14.0.4 相同或更高的 nextjs 版本中修复 Issue occurred in next 14.1.0 again

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.