Support ESM in next.config.js

Question

I'm making some optimation on nextjs project and need to has type: 'module' on thepackage.json file. But then got the error

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: my_path/next.config.js require() of ES modules is not supported.

Seem next.config.js is not support ESM yet. The issue already discussed here: https://github.com/vercel/next.js/issues/9607 but I can find a solution yet. Any help guys?

I'm using: node v12.17.0 next 11.1.0

And here is my 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)

My package.json file

{
  "type": "module"
  ...
}

UPDATE: What I optimated is changing the way to call Component from 'ant' package.

Form

import { Row, Col } from 'antd'

To

import Row from 'antd/es/row'
import Col from 'antd/es/col'

then cause this error

my_path/node_modules/antd/es/row/index.js:1

import { Row } from '../grid'; ^^^^^^

SyntaxError: Cannot use import statement outside a module

I fixed this by add type: "module" in package.json and have problem with next.config.js file

Maybe this can help you? https://stackoverflow.com/questions/65974337/import-es-module-in-next-js-err-require-esm — Camilo, Aug 26 '21 at 18:44
*"I'm making some optimizations on Next.js project and need to has type: 'module'"* -- can I know what optimizations you are referring to? Cause IMHO only files related with your custom server are not processed by babel/webpack, and hence don't support ESM syntax by default, but can be made so by simply changing their extension to `.mjs`. What is the need to modify `package.json` to indicate `type: module` at the first place? — brc-dd, Aug 31 '21 at 14:38
@bird So I guess you did that because for some reasons `antd`'s tree shaking wasn't working for you. Right? — brc-dd, Sep 01 '21 at 10:33
@brc-dd yes, right. I am trying another way. That's config the webpack — bird, Sep 01 '21 at 10:54
@bird If the main issue is to consume an ESM library in your Next.js app, have you tried Camilo's suggested link: [Import ES module in Next.js ERR_REQUIRE_ESM](https://stackoverflow.com/a/65978156/1870780)? — juliomalves, Sep 01 '21 at 12:26

score 19 · Answer 1 · answered Oct 30 '21 at 18:58

19

From Next.js 12, ES modules is now supported in the config file by renaming it to 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
})

answered Oct 30 '21 at 18:58

juliomalves

42,130
20
150
146

3

having next.config.mjs and ```type: 'module'``` in package.json results in error: require() of ES Module /usr/app/.next/server/pages/_document.js from /usr/app/node_modules/next/dist/server/require.js not supported. – Raphael PICCOLO Nov 26 '21 at 17:52
3

You only need to pick one or the other: you can *either* rename every file to `.mjs` *or* you can add `"type": "module"` in `package.json`. – machineghost Jan 06 '22 at 19:50

Support ESM in next.config.js

1 Answers1

Linked