javascript - 在 next.config.js 中支持 ESM

Question

我正在对 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.js

import 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 的问题文件

Answer 1

从 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
})