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

🐛 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"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Reactions: 3
  • Comments: 28 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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'
  ],
}

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.

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

you can use transpilePackages

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:

image

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.

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

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!

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.