From 039735350cb1c57b92111989ec6274df3ef8de38 Mon Sep 17 00:00:00 2001
From: JJ Kasper <jj@jjsweb.site>
Date: Sat, 14 Aug 2021 08:52:18 -0500
Subject: [PATCH] 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                          |  4 +++
 errors/next-config-error.md                   | 14 +++++++++
 packages/next/server/config.ts                | 12 +++++++-
 .../config-syntax-error/pages/index.js        |  3 ++
 .../config-syntax-error/test/index.test.js    | 30 +++++++++++++++++++
 5 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 errors/next-config-error.md
 create mode 100644 test/integration/config-syntax-error/pages/index.js
 create mode 100644 test/integration/config-syntax-error/test/index.test.js

diff --git a/errors/manifest.json b/errors/manifest.json
index 918ca43deb74b7b..fc6a3ebb010ebf7 100644
--- a/errors/manifest.json
+++ b/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"
         }
       ]
     }
diff --git a/errors/next-config-error.md b/errors/next-config-error.md
new file mode 100644
index 000000000000000..d5e5b8b146387f9
--- /dev/null
+++ b/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/)
diff --git a/packages/next/server/config.ts b/packages/next/server/config.ts
index b2a40a20db41437..a07d610f1e60777 100644
--- a/packages/next/server/config.ts
+++ b/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
diff --git a/test/integration/config-syntax-error/pages/index.js b/test/integration/config-syntax-error/pages/index.js
new file mode 100644
index 000000000000000..821fdd14d09725f
--- /dev/null
+++ b/test/integration/config-syntax-error/pages/index.js
@@ -0,0 +1,3 @@
+export default function Page(props) {
+  return <p>index page</p>
+}
diff --git a/test/integration/config-syntax-error/test/index.test.js b/test/integration/config-syntax-error/test/index.test.js
new file mode 100644
index 000000000000000..4d7c82c80722c32
--- /dev/null
+++ b/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')
+  })
+})