在 next.config.js 中支持 ESM

Question

我正在对 nextjs 项目进行一些优化，并且需要对type: 'module'文件进行优化package.json。但后来得到了错误

错误 [ERR_REQUIRE_ESM]：必须使用 import 加载 ES 模块：不支持 ES 模块的 my_path/next.config.js require()。

看来 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

从'../grid'导入{行}；^^^^^^

语法错误：无法在模块外部使用 import 语句

我通过添加解决了这个问题type: "module"并且文件package.json有问题next.config.js

Answer 1

从 Next.js 12 开始，配置文件中现在支持 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
})