在next.config.js中支持ESM

Question

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

错误ERR_REQUIRE_ESM:必须使用导入加载ES模块: my_path/next.config.js要求ES模块的()不受支持。

看来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’导入{ Row }；^ SyntaxError:无法在模块外使用导入语句

我通过在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
})