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

victorandree · 2023-11-23T09:06:04Z

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 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 antd@5.11.3 (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

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 #57968, as that PR changed antd imports to es from lib, presumably without also making sure these files are transpiled correctly.

The text was updated successfully, but these errors were encountered:

nejcet · 2023-11-23T10:03:44Z

+1

CatalinScaesteanu · 2023-11-24T15:58:36Z

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 · 2023-11-26T20:41:35Z

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 · 2023-11-28T21:34:01Z

There seems to be a PR to fix this: #58992

ldeveber · 2023-12-01T17:54:03Z

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 · 2023-12-22T23:25:39Z

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 · 2024-01-05T20:42:07Z

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 · 2024-01-18T16:45:34Z

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.

See vercel/next.js#40183 and vercel/next.js#58817.

* fix(deps): update dependency next to v14 * fix(nextjs): rectify antd-related modularize imports See vercel/next.js#40183 and vercel/next.js#58817. --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: sabertazimi <sabertazimi@gmail.com>

huozhi · 2024-02-05T13:40:22Z

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

romelgomez · 2024-02-05T19:19:55Z

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/react-hooks@8.0.1" 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 · 2024-02-24T04:00:18Z

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

github-actions · 2024-03-09T12:01:28Z

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.

victorandree added the bug Issue was opened via the bug report template. label Nov 23, 2023

github-actions bot added the SWC Related to minification/transpilation in Next.js. label Nov 23, 2023

victorandree mentioned this issue Nov 23, 2023

nextjs/TypeScript with Jest: "SyntaxError: Cannot use import statement outside a module" for some packages #58707

Open

1 task

This comment has been minimized.

Sign in to view

zombieJ mentioned this issue Nov 23, 2023

NextJs 14.0.3 issue ant-design/ant-design#46053

Closed

w20k mentioned this issue Dec 6, 2023

[BUG] @refinedev/antd doesn't work with NextJS 14.0.3 refinedev/refine#5353

Closed

sabertazimi added a commit to sabertazimi/blog that referenced this issue Jan 20, 2024

fix(nextjs): rectify antd-related modularize imports

adcf41b

See vercel/next.js#40183 and vercel/next.js#58817.

kdy1 assigned kdy1 and unassigned kdy1 Jan 30, 2024

huozhi closed this as completed Feb 5, 2024

cjy4979 mentioned this issue Feb 24, 2024

SyntaxError: Cannot use import statement outside a module when use antd #62472

Closed

github-actions bot added the locked label Mar 9, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 9, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

victorandree commented Nov 23, 2023

nejcet commented Nov 23, 2023 •

edited

Loading

This comment has been minimized.

CatalinScaesteanu commented Nov 24, 2023 •

edited

Loading

raulmarindev commented Nov 26, 2023

raulmarindev commented Nov 28, 2023

ldeveber commented Dec 1, 2023

abbaty48 commented Dec 22, 2023

Atalus commented Jan 5, 2024

behroodrzdr commented Jan 18, 2024

huozhi commented Feb 5, 2024

romelgomez commented Feb 5, 2024

cjy4979 commented Feb 24, 2024

github-actions bot commented Mar 9, 2024

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

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

Comments

victorandree commented Nov 23, 2023

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Verify canary release

Provide environment information

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

Additional context

nejcet commented Nov 23, 2023 • edited Loading

This comment has been minimized.

CatalinScaesteanu commented Nov 24, 2023 • edited Loading

raulmarindev commented Nov 26, 2023

raulmarindev commented Nov 28, 2023

ldeveber commented Dec 1, 2023

abbaty48 commented Dec 22, 2023

Atalus commented Jan 5, 2024

behroodrzdr commented Jan 18, 2024

huozhi commented Feb 5, 2024

romelgomez commented Feb 5, 2024

cjy4979 commented Feb 24, 2024

github-actions bot commented Mar 9, 2024

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

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

nejcet commented Nov 23, 2023 •

edited

Loading

CatalinScaesteanu commented Nov 24, 2023 •

edited

Loading