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)
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.
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:
Make sure your file has the
.js
extension. For example, if your file is namedexample.js
, rename it toexample.js
.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 thepages
directory.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.
you can use transpilePackages
[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 thetranspilePackages
list.The error that the code above solves is represented by the image below:
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 containPageHeader
component imported from@ant-design/pro-layout
after changing root component import tonext/dynamic
issue was gonewhat interesting - in my project i have 5 places where
PageHeader
was imported but only in one it throws errorGreat 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.