🐛[BUG] SyntaxError: Cannot use import statement outside a module, NEXTJS 13

[IcanPressF]

🐛 About Error

Next 13 framework is used, there was an attempt to use pro ant components, unfortunately I get an error, for more details, look at the codesandbox

SyntaxError: Cannot use import statement outside a module /node_modules/antd/es/skeleton/style/index.js (1)

📷 Problem reproduction

https://shortest.link/drl5 Go to /about page

🏞 Desired result

Display components without errors

💻 播放代碼

https://shortest.link/drl5 Go to /about page

© package.json

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@ant-design/pro-components": "^2.3.52",
    "@types/qs": "^6.9.7",
    "antd": "^5.0.0",
    "next": "latest",
    "qs": "^6.11.0",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "browser": {
    "fs": false,
    "path": false
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "typescript": "4.7.4"
  }
}

[github-actions[bot]]

以下的 Issues 可能会帮助到你 / The following issues may help you

• [#582][🧐pro-tabel jest单测时报错 Cannot use import statement outside a module][66%]

[UsVfxArtia]

Please help me solve this problem

[luo3house]

I guess there is an exception during publish, which caused an es import in cjs module. When I rebuild library, it outputs correctly.

[UnkAtreus]

Issue is still have. Pls help

[allanlisboa]

I have the same problem

[UsVfxArtia]

I guess there is an exception during publish, which caused an es import in cjs module. When I rebuild library, it outputs correctly. Hello! What do you mean? How to rebuild?

[UsVfxArtia]

I guess there is an exception during publish, which caused an es import in cjs module. When I rebuild library, it outputs correctly.

Did u visit /about page? Error occurs there

[UsVfxArtia]

very sad, seems like it wont be fixed.

[UnkAtreus]

Yeah it wont be fixed but I installed sub component instead of @ant-design/pro-components

[Armito]

same problem

[jkiss]

SyntaxError: Cannot use import statement outside a module 心累。。。引入 antd的 table就没问题🤔

[raptoria]

also having this issue...

[alexneo2003]

have same issue my Content component contain PageHeader component imported from @ant-design/pro-layout after changing root component import to next/dynamic issue was gone

- import Content from 'components/pages/Course/Content'
+ import dynamic from 'next/dynamic'
import { useRouter } from 'next/router'

+ const Content = dynamic(async () => await import('components/pages/Course/Content'), {
+  ssr: false,
+ })

function ContentPage() {
  return <Content />
}

export default ContentPage

what interesting - in my project i have 5 places where PageHeader was imported but only in one it throws error

[piperubio]

From my part, I was able to solve this thanks to the response from @ogienma at https://github.com/ant-design/pro-components/issues/4852#issuecomment-1364570216 in Next.js v13 with Ant Design v5.

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns. 此回复基于 ChatGPT 自动生成，可以尝试下方案，官方员会在一定时间后继续继续处理。

Great to hear that the issue is resolved for you! Could you please share the solution you used in case others encounter similar issues in the future? Thank you!

[lyan-ap]

Server Error SyntaxError: Cannot use import statement outside a module

[jkiss]

maybe antd-pro is for internal, recommend to make your own pro by using antd. 😃

[ltienphat1307]

I have the same one

[Eureka-Sacha]

same to me .

[chenshuai2144]

The error message "SyntaxError: Cannot use import statement outside a module" typically occurs in a Next.js 13 project when you're trying to use an import statement in a file that is not recognized as a module. In Next.js 13, you need to use the .js extension for JavaScript files to be treated as modules.

To resolve this issue, you can try the following steps:

1. Make sure your file has the .js extension. For example, if your file is named example.js, rename it to example.js.

2. Ensure that the file is located in a directory recognized as a module. In Next.js, modules should be placed in the pages directory or any subdirectory inside the pages directory.

3. If you're trying to import a module from a different file, make sure the imported file also has the .js extension and is located in a module recognized directory.

By following these steps, you should be able to resolve the "SyntaxError: Cannot use import statement outside a module" issue in Next.js 13.

[chenshuai2144]

const nextConfig = {
  reactStrictMode: true,
  // es 模块编译
  transpilePackages: ['kitchen-flow-editor', '@ant-design/pro-editor', 'zustand', 'leva'],

you can use transpilePackages

[daoyuly]

When you encounter "SyntaxError: Unexpected token 'export'", "'SyntaxError: Cannot use import statement outside a module'" and other related issues, you need to add the module that exposes the issue to the transpilePackages configuration.

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    'rc-util',
    '@ant-design',
    'kitchen-flow-editor',
    '@ant-design/pro-editor',
    'zustand', 'leva', 'antd',
    'rc-pagination',
    'rc-picker'
  ],
}

[pedroSoaresll]

When you encounter "SyntaxError: Unexpected token 'export'", "'SyntaxError: Cannot use import statement outside a module'" and other related issues, you need to add the module that exposes the issue to the transpilePackages configuration.

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    'rc-util',
    '@ant-design',
    'kitchen-flow-editor',
    '@ant-design/pro-editor',
    'zustand', 'leva', 'antd',
    'rc-pagination',
    'rc-picker'
  ],
}

[solved]

This helped me to identify and solve a similar problem that was happening to me. Note that the problem is only happening in the Jest environment in my case, in the dev mode and build script it is working correctly without the configuration below:

The weirdest part was that I needed to put the "@babel/runtime" into the transpilePackages list.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    "antd",
    "rc-util",
    "@babel/runtime",
    "@ant-design/icons",
    "@ant-design/icons-svg",
    "rc-pagination",
    "rc-picker",
    "rc-tree",
    "rc-table",
  ],
};

module.exports = nextConfig;

The error that the code above solves is represented by the image below:

[JackHammer29]

When you encounter "SyntaxError: Unexpected token 'export'", "'SyntaxError: Cannot use import statement outside a module'" and other related issues, you need to add the module that exposes the issue to the transpilePackages configuration.

const nextConfig = {
  reactStrictMode: true,
  transpilePackages: [
    'rc-util',
    '@ant-design',
    'kitchen-flow-editor',
    '@ant-design/pro-editor',
    'zustand', 'leva', 'antd',
    'rc-pagination',
    'rc-picker'
  ],
}

[solved]

This helped me to identify and solve a similar problem that was happening to me. Note that the problem is only happening in the Jest environment in my case, in the dev mode and build script it is working correctly without the configuration below:

The weirdest part was that I needed to put the "@babel/runtime" into the transpilePackages list.

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: [
    "antd",
    "rc-util",
    "@babel/runtime",
    "@ant-design/icons",
    "@ant-design/icons-svg",
    "rc-pagination",
    "rc-picker",
    "rc-tree",
    "rc-table",
  ],
};

module.exports = nextConfig;

The error that the code above solves is represented by the image below:

For some reason the issue remains for me, babel complaining on build, despite adding it to transpilePackages

[Haamso]

Help me plss !!

[NullBetaGG]

The same error was happening to me, my import was like this:

import { Popconfirm } from "antd";

so I changed it to:

import { Popconfirm } from "antd/lib";

and incredibly the webpack error was resolved.

[colelee]

The same error was happening to me, my import was like this:

import { Popconfirm } from "antd";

so I changed it to:

import { Popconfirm } from "antd/lib";

and incredibly the webpack error was resolved.

why?

[NullBetaGG]

When you import a module using "antd", webpack looks for the module in the "node_modules" directory and then resolves it based on the main entry point specified in the "package.json" file of the "antd" package. This main entry point could be a JavaScript file or a directory.

In contrast, when you import a module using "antd/lib", webpack directly targets the specific file or directory within the "antd" package without relying on the main entry point specified in "package.json". This can sometimes resolve issues related to how webpack resolves module paths or handles specific files.