ESM support with NextJS
Unanswered
European imported fire ant posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
European imported fire antOP
I'm developing tooling for NextJS, and even if my compiled application is using ESM {type: module} in package.json I'm getting the following error from server/index.js
"type": "Error",
"message": "require() of ES Module /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nextjs/examples/my-nextjs-app/next.config.js from /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nodemodules/.pnpm/next@14.0.2@babel+core@7.24.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js not supported.\nInstead change the require of next.config.js in /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nodemodules/.pnpm/next@14.0.2@babel+core@7.24.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js to a dynamic import() which is available in all CommonJS modules."
"type": "Error",
"message": "require() of ES Module /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nextjs/examples/my-nextjs-app/next.config.js from /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nodemodules/.pnpm/next@14.0.2@babel+core@7.24.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js not supported.\nInstead change the require of next.config.js in /Users/leimonio/dev/bit.dev/frontend-nextjs-new/nodemodules/.pnpm/next@14.0.2@babel+core@7.24.1_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/config.js to a dynamic import() which is available in all CommonJS modules."
3 Replies
![Avatar](https://cdn.discordapp.com/embed/avatars/0.png)
Australian Terrier
Seems like you might need to rename
next.config.js
to next.config.mjs
and use import statements in there![Avatar](https://cdn.discordapp.com/avatars/484037068239142956/44415017de6fed2ccd5d44b4b2051ac0.webp?size=256)
joulev
the cjs
next.config.js
is still supported i think... can you show us the next.config.js
file?![Avatar](https://cdn.discordapp.com/embed/avatars/5.png)
Asian paper wasp
The key is here:
1. Change the filename to
2. Use
3. Just don't add
if my compiled application is using ESM {type: module} in package.jsonThat makes every JS file by default in ESM. That means you can't do
require()
. So you have 3 options1. Change the filename to
next.config.cjs
that explicitly tells Node.js that this is supposed to be a common JS file2. Use
import
in the file instead of require()
3. Just don't add
type: module