Next.js 上的 ERR_REQUIRE_ESM 和 Package.json 错误。更新后。怎么修？

Question

我从 Node 和 Next.js 中休息了很长时间，以至于我什至不记得大部分内容了。我想我会再次检查这个，并且很清楚如果我更新我的包会破坏，我还是这样做了。它现在从 Next.js 10.0.3 移动到 11.1.2。

错误：

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from C:\Users\username\Documents\React-Example\user-site-master\.env.local
info  - Loaded env from C:\Users\username\Documents\React-Example\user-site-master\.env
Error: failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\username\Documents\React-Example\user-site-master\next.config.js
require() of ES modules is not supported.
require() of C:\Users\username\Documents\React-Example\user-site-master\next.config.js from C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\config.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename next.config.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\username\Documents\React-Example\user-site-master\package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at Object.loadConfig [as default] (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\config.js:347:32)
at async NextServer.loadConfig (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next.js:112:22)
at async NextServer.prepare (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next.js:94:24)
at async C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\cli\next-dev.js:121:9 { code: 'ERR_REQUIRE_ESM'

好的，所以我将 next-config.js 重命名为 .cjs，在 package.json 中添加了一个 {"type": "module"}，如下所示：

"version": "0.0.1",
 "type": "module",
...

这种语法是否适用于类型模块？现在它一直这样抱怨。

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js
require() of ES modules is not supported.
require() of C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js from C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename _document.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\username\Documents\React-Example\user-site-master\package.json.
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.requirePage (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js:47:12)
    at Object.loadComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\load-components.js:47:45)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next-server.js:954:63)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\dev\next-dev-server.js:546:26)
    at processTicksAndRejections (internal/process/task_queues.js:93:5) {
  code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js
require() of ES modules is not supported.
require() of C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js from C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename _document.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\username\Documents\React-Example\user-site-master\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.requirePage (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js:47:12)
    at Object.loadComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\load-components.js:47:45)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next-server.js:954:63)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\dev\next-dev-server.js:546:26)
    at async DevServer.renderErrorToResponse (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next-server.js:1414:26) {
  code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js
require() of ES modules is not supported.
require() of C:\Users\username\Documents\React-Example\user-site-master\.next\server\pages\_document.js from C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename _document.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from C:\Users\username\Documents\React-Example\user-site-master\package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.requirePage (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\require.js:47:12)
    at Object.loadComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\load-components.js:47:45)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next-server.js:954:63)
    at DevServer.findPageComponents (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\dev\next-dev-server.js:546:26)
    at async DevServer.renderErrorToResponse (C:\Users\username\Documents\React-Example\user-site-master\node_modules\next\dist\server\next-server.js:1414:26) {
  code: 'ERR_REQUIRE_ESM'
}

我尝试将 _document.js 重命名为 _document.cjs，但错误仍然存​​在。 到底是怎么回事？我不明白这些。有人可以建议如何解决这个问题吗？

另外，为什么开发人员会在代码更新之间引入这些类型的问题？难道他们不能理解这些东西可能会破坏并引入某种后端支持吗？

我现在只是在寻找一个临时修复程序来编译它。感谢您的帮助！

编辑：这是next-config.js。

const readingTime = require('reading-time');
const mdxPrism = require('mdx-prism');
const withMdxEnhanced = require('next-mdx-enhanced');
const isProd = process.env.NODE_ENV === 'production';


module.exports = withMdxEnhanced({
  layoutPath: 'layouts',
  defaultLayout: true,
  remarkPlugins: [
    require('remark-autolink-headings'),
    require('remark-slug'),
    require('remark-code-titles'),
    require('./utils/title-style')
  ],
  rehypePlugins: [mdxPrism],
  extendFrontMatter: {
    process: (mdxContent) => ({
      wordCount: mdxContent.split(/\s+/gu).length,
      readingTime: readingTime(mdxContent)
    })
  }
})({
  webpack: (config, { isServer }) => {
    if (isServer) {
      require('./scripts/generate-sitemap');
    }

    return config;
  }
});

Answer 1

对于next 11，有必要在next.config.js 和experimental: { esmExternals: true } 中启用ESM 兼容性。

但是，即使这样或使用 next 12（默认启用 ESM），也会出现描述的错误：

Error [ERR_REQUIRE_ESM]: require() of ES Module [...]_document.js from [...]node_modules/next/dist/server/require.js not supported.

从package.json 中删除"type": "module" 时，此错误已修复。对使用 ESM-only node_modules 的支持仍然很好。

"type": "module" 会破坏next 服务器的原因是它仍然是用 CJS 编写的，同时需要本地 .next 文件夹中的编译文件，该文件夹现在被限定为 ESM。这预计会失败，因此除非next 包也更新为"type": "module"，否则这将无法正常工作。