Load next.config.mjs as ESM

lint-staged.config.js

@@ -5,7 +5,7 @@ const eslint = new ESLint()
 const isWin = process.platform === 'win32'
 
 module.exports = {
-  '**/*.{js,jsx,ts,tsx}': (filenames) => {
+  '**/*.{js,jsx,ts,tsx,mjs}': (filenames) => {
     const escapedFileNames = filenames
       .map((filename) => `"${isWin ? filename : escape([filename])}"`)
       .join(' ')

packages/next/lib/native-dynamic-import.ts

@@ -0,0 +1,6 @@
+// The 'babel-plugin-dynamic-import-node' babel plugin will be disabled for
+// this file so that we can use it as an escape hatch to the native import()
+// implementation
+export default async function nativeImport(mod: string) {
+  return import(mod)
+}

packages/next/next-server/server/config.ts

@@ -8,6 +8,7 @@ import { execOnce } from '../lib/utils'
 import { defaultConfig, normalizeConfig } from './config-shared'
 import { loadWebpackHook } from './config-utils'
 import { ImageConfig, imageConfigDefault, VALID_LOADERS } from './image-config'
+import nativeImport from '../../lib/native-dynamic-import'
 import { loadEnvConfig } from '@next/env'
 
 export { DomainLocales, NextConfig, normalizeConfig } from './config-shared'
@@ -406,6 +407,23 @@ function assignDefaults(userConfig: { [key: string]: any }) {
   return result
 }
 
+async function findConfigFile(dir: string): Promise<string | undefined> {
+  const files = [CONFIG_FILE.replace(/\.js$/, '.mjs'), CONFIG_FILE]
+  return findUp(files, { cwd: dir })
+}
+
+async function importCjsOrEsm(mod: string): Promise<any> {
+  try {
+    return require(mod)
+  } catch (err) {
+    if (err.code === 'ERR_REQUIRE_ESM') {
+      const { default: defaultExport } = await nativeImport(mod)
+      return defaultExport
+    }
+    throw err
+  }
+}
+
 export default async function loadConfig(
   phase: string,
   dir: string,
@@ -418,11 +436,12 @@ export default async function loadConfig(
     return assignDefaults({ configOrigin: 'server', ...customConfig })
   }
 
-  const path = await findUp(CONFIG_FILE, { cwd: dir })
+  const path = await findConfigFile(dir)
 
   // If config file was found
   if (path?.length) {
-    const userConfigModule = require(path)
+    const userConfigModule = await importCjsOrEsm(path)
+
     const userConfig = normalizeConfig(
       phase,
       userConfigModule.default || userConfigModule

packages/next/taskfile-babel.js

@@ -57,18 +57,22 @@ const babelServerOpts = {
         loose: true,
         // This is handled by the Next.js webpack config that will run next/babel over the same code.
         exclude: [
+          // dynamic import() is handled by 'babel-plugin-dynamic-import-node'
+          'proposal-dynamic-import',
           'transform-typeof-symbol',
           'transform-async-to-generator',
           'transform-spread',
         ],
       },
     ],
   ],
-  plugins: [
-    'babel-plugin-dynamic-import-node',
-    ['@babel/plugin-proposal-class-properties', { loose: true }],
-  ],
+  plugins: [['@babel/plugin-proposal-class-properties', { loose: true }]],
   overrides: [
+    {
+      plugins: ['babel-plugin-dynamic-import-node'],
+      // This is our escape hatch to the native node.js dynamic import:
+      exclude: /\/lib\/native-dynamic-import\.ts$/,
+    },
     {
       test: /\.tsx?$/,
       // eslint-disable-next-line import/no-extraneous-dependencies

test/integration/config-esm/next.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  env: {
+    customVar: 'hello',
+  },
+}

test/integration/config-esm/pages/index.jsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div id="custom-var">{process.env.customVar}</div>
+}

test/integration/config-esm/test/index.test.js

@@ -0,0 +1,62 @@
+/* eslint-env jest */
+
+import webdriver from 'next-webdriver'
+
+import {
+  findPort,
+  killApp,
+  launchApp,
+  nextBuild,
+  nextStart,
+} from 'next-test-utils'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 2)
+
+let app
+let appPort
+const appDir = join(__dirname, '../')
+
+function runTests() {
+  it('should have loaded next.config.mjs', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.waitForElementByCss('#custom-var')
+      const text = await browser.elementByCss('#custom-var').text()
+      expect(text).toBe('hello')
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+}
+
+const nodeVersion = Number(process.versions.node.split('.')[0])
+const skipTests = nodeVersion < 12
+
+;(skipTests ? describe.skip : describe)('next.config.mjs', () => {
+  describe('dev mode', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    runTests()
+  })
+
+  describe('production mode', () => {
+    beforeAll(async () => {
+      await nextBuild(appDir)
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    runTests()
+  })
+})