Add proper error when failing to load next.config.js

errors/manifest.json

@@ -442,6 +442,10 @@
         {
           "title": "module-not-found",
           "path": "/errors/module-not-found.md"
+        },
+        {
+          "title": "next-config-error",
+          "path": "/errors/next-config-error.md"
         }
       ]
     }

errors/next-config-error.md

@@ -0,0 +1,14 @@
+# next.config.js Loading Error
+
+#### Why This Error Occurred
+
+When attempting to load your `next.config.js` file an error occurred. This could be due to a syntax error or attempting to `require` a module that wasn't available.
+
+#### Possible Ways to Fix It
+
+See the error message in your terminal where you started `next` to see more context. The `next.config.js` file is not transpiled by Next.js currently so ensure only features supported by your current node.js version are being used.
+
+### Useful Links
+
+- [next.config.js documentation](https://nextjs.org/docs/api-reference/next.config.js/introduction)
+- [node.js version feature chart](https://node.green/)

packages/next/server/config.ts

@@ -467,7 +467,17 @@ export default async function loadConfig(
 
   // If config file was found
   if (path?.length) {
-    const userConfigModule = require(path)
+    let userConfigModule: any
+
+    try {
+      userConfigModule = require(path)
+    } catch (err) {
+      console.error(
+        chalk.red('Error:') +
+          ' failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error'
+      )
+      throw err
+    }
     const userConfig = normalizeConfig(
       phase,
       userConfigModule.default || userConfigModule

test/integration/config-syntax-error/pages/index.js

@@ -0,0 +1,3 @@
+export default function Page(props) {
+  return <p>index page</p>
+}

test/integration/config-syntax-error/test/index.test.js

@@ -0,0 +1,30 @@
+/* eslint-env jest */
+import fs from 'fs-extra'
+import { join } from 'path'
+import { nextBuild } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 1)
+const appDir = join(__dirname, '..')
+const nextConfig = join(appDir, 'next.config.js')
+
+describe('Invalid resolve alias', () => {
+  it('should show relevant error when webpack resolve alias is wrong', async () => {
+    await fs.writeFile(
+      nextConfig,
+      `
+      module.exports = {
+        reactStrictMode: true,,
+      }
+    `
+    )
+    const { stderr } = await nextBuild(appDir, undefined, {
+      stderr: true,
+    })
+    await fs.remove(nextConfig)
+
+    expect(stderr).toContain(
+      'Error: failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error'
+    )
+    expect(stderr).toContain('SyntaxError')
+  })
+})