我正在对 nextjs 项目进行一些优化,需要 type: 'module'
在 package.json
文件。但后来得到了错误
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: my_path/next.config.js require() of ES modules is not supported.
似乎 next.config.js 还不支持 ESM。
这里已经讨论过的问题:https://github.com/vercel/next.js/issues/9607但我还可以找到解决方案。
有什么帮助吗?
我在用着:
node v12.17.0
next 11.1.0
这是我的 next.config.jsimport withLess from '@zeit/next-less'
const nextConfig = {
target: 'serverless',
productionBrowserSourceMaps: true,
webpack5: true,
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60,
pagesBufferLength: 5
},
lessLoaderOptions: {
javascriptEnabled: true
},
trailingSlash: false,
}
export default withLess(nextConfig)
我的 package.json 文件{
"type": "module"
...
}
更新:我优化的是改变从
'ant'
调用组件的方式包裹。形式
import { Row, Col } from 'antd'
至import Row from 'antd/es/row'
import Col from 'antd/es/col'
然后导致此错误my_path/node_modules/antd/es/row/index.js:1
import { Row } from '../grid'; ^^^^^^
SyntaxError: Cannot use import statement outside a module
我通过添加
type: "module"
解决了这个问题在 package.json
并且遇到 next.config.js
的问题文件
最佳答案
从 Next.js 12 开始,config file 现在支持 ES 模块。通过将其重命名为 next.config.mjs
.
// next.config.mjs
import withLess from '@zeit/next-less'
export default withLess({
productionBrowserSourceMaps: true,
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60,
pagesBufferLength: 5
},
lessLoaderOptions: {
javascriptEnabled: true
},
trailingSlash: false
})
关于javascript - 在 next.config.js 中支持 ESM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68909624/