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
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 plaining 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-ponents.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-ponents.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-ponents.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 pile. 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;
}
});
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/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 plaining 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-ponents.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-ponents.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-ponents.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 pile. 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;
}
});
- I've just added it. Please take a look @juliomalves. – Zac1 Commented Sep 13, 2021 at 13:25
- Similar related issue here for nextJS – Tushar Mistry Commented Sep 13, 2021 at 13:29
-
"remove "type": "module" from C:\Users\username\Documents\React-Example\user-site-master\package.json" - Have you tried removing
"type": "module"from your app'spackage.json? – juliomalves Commented Sep 13, 2021 at 15:42 - Of course I tried it. I only added the type module because all the answers mention that you should add that with next 11. – Zac1 Commented Sep 13, 2021 at 16:00
- 1 The errors are ing from the remark plugins as they support only ESM. For now, you can use an older version of those packages which supports non-ESM. For example, you can use version 6.0.1 of remark-autolink-headings instead of the latest version. Otherwise, you will have to find a way to support ESM in your NextJS application. – Nirmalya Ghosh Commented Sep 13, 2021 at 18:01
2 Answers
Reset to default 4With next 11 it's necessary to enable ESM patibility 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 piled 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.
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/blog/next-12#es-modules-support-and-url-imports