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

Question

I had taken a LONG break from Node and Next.js to the point that I don't even remember most of the stuff. I thought I'll check on this again, and knowing very well things would break if I updated my packages, I did it anyway. It moved from Next.js 10.0.3 to 11.1.2 now.

Error:

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'

Ok, so I renamed next-config.js to.cjs, added a {"type": "module"} to package.json like shown below:

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

Is this syntax right for type module? and now it keeps complaining like this.

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'
}

I tried renaming _document.js to _document.cjs but the error remains. What is going on? I don't understand any of this. Can someone please suggest how to fix this?

Also, why do developers introduce these type of issues between code updates? Can't they understand these things might break and introduce some sort of back-level support?

I am just looking for a temporary fix now just to get this to compile. Thanks for your help!

EDIT: Here's the 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

With next 11 it's necessary to enable ESM compatibility in next.config.js with experimental: { esmExternals: true } .

However, even with that or using next 12 (ESM enabled by default) the described error will appear:

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

This error is fixed when removing "type": "module" from package.json . Support for using ESM-only node_modules is still fine.

The reason "type": "module" will break the next server is that it's still written in CJS while requiring the compiled files from the local .next folder which is now scoped to ESM. This is expected to fail, so unless the next package is updated to "type": "module" as well this cannot work.

Answer 2

I spent a half day to find a solution to fix this but at the end, i found a simple way... we just need to upgrade Next.js version to 12. Please upgrade Next.js version to 12 to fix ESM issue.

npm install next@12

or

yarn add next@12

Next.js 12 - ES Modules Support and URL Imports You can read more information here https://nextjs.org/blog/next-12#es-modules-support-and-url-imports