Add proper error when failing to load next.config.js (#28099)

This adds a proper error when we fail to load a user's `next.config.js` as the default node error can be confusing on its own and makes it seem like something failed internally in Next.js. We can expand on the included error doc added and potentially also add better syntax errors by parsing with acorn when we fail to load this file in the future. 

<details>

<summary>screenshot</summary>

<img width="962" alt="Screen Shot 2021-08-13 at 21 46 09" src="https://user-images.githubusercontent.com/22380829/129432211-6d858062-eea0-4bb9-8725-5bde98bdc47b.png">

</details>

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')
+  })
+})