在 next.config.js 中支持 ESM答案

【问题标题】：Support ESM in next.config.js在 next.config.js 中支持 ESM
【发布时间】：2021-10-24 19:24:50
【问题描述】：

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

错误 [ERR_REQUIRE_ESM]：必须使用导入来加载 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'导入{行}； ^^^^^^

SyntaxError: 不能在模块外使用 import 语句

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

【问题讨论】：

也许这对你有帮助？ stackoverflow.com/questions/65974337/…
“我正在对 Next.js 项目进行一些优化，需要 type: 'module'” -- 我能知道你指的是什么优化吗？因为恕我直言，只有与您的自定义服务器相关的文件不会被 babel/webpack 处理，因此默认情况下不支持 ESM 语法，但只需将它们的扩展名更改为 .mjs 即可。有什么必要先修改package.json 表示type: module？
@brc-dd 在帖子中更新
@bird 所以我猜你这样做是因为出于某些原因antd 的摇树不适合你。对吗？
@brc-dd 是的，对。我正在尝试另一种方式。这就是配置 webpack

标签： javascript node.js next.js

【解决方案1】：

你试过“ssr: false”然后动态导入吗？

【讨论】：

【解决方案2】：

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

【讨论】：

在 package.json 中有 next.config.mjs 和 type: 'module' 会导致错误：来自 /usr 的 ES 模块 /usr/app/.next/server/pages/_document.js 的 require() /app/node_modules/next/dist/server/require.js 不支持。
你只需要选择一个或另一个：你可以或者将每个文件重命名为.mjs 或者你可以添加"type": "module" in package.json.