Error Message Clarity (vercel#16052)

* make the error message more clear if webpack config comes back undefined

* Update check and add test

* bump

* Update build-output test

Co-authored-by: JJ Kasper <[email protected]>

Author: jescalan

errors/undefined-webpack-config.md

@@ -0,0 +1,28 @@
+# Missing webpack config
+
+#### Why This Error Occurred
+
+The value returned from the custom `webpack` function in your `next.config.js` was undefined. This can occur from the initial config value not being returned.
+
+#### Possible Ways to Fix It
+
+Make sure to return the `webpack` config from your custom `webpack` function in your `next.config.js`
+
+```js
+// next.config.js
+
+module.exports = {
+  webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
+    // Note: we provide webpack above so you should not `require` it
+    // Perform customizations to webpack config
+    config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
+
+    // Important: return the modified config
+    return config
+  },
+}
+```
+
+### Useful Links
+
+- [Custom webpack config Documentation](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config)

packages/next/build/webpack-config.ts

@@ -1224,6 +1224,13 @@ export default async function getBaseWebpackConfig(
       webpack,
     })
 
+    if (!webpackConfig) {
+      throw new Error(
+        'Webpack config is undefined. You may have forgot to return properly from within the "webpack" method of your next.config.js.\n' +
+          'See more info here https://err.sh/next.js/undefined-webpack-config'
+      )
+    }
+
     if (dev && originalDevtool !== webpackConfig.devtool) {
       webpackConfig.devtool = originalDevtool
       devtoolRevertWarning(originalDevtool)

test/integration/build-output/test/index.test.js

@@ -101,10 +101,10 @@ describe('Build Output', () => {
       expect(parseFloat(err404Size) - 3.6).toBeLessThanOrEqual(0)
       expect(err404Size.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(err404FirstLoad) - 65.1).toBeLessThanOrEqual(0)
+      expect(parseFloat(err404FirstLoad) - 65.2).toBeLessThanOrEqual(0)
       expect(err404FirstLoad.endsWith('kB')).toBe(true)
 
-      expect(parseFloat(sharedByAll) - 61.7).toBeLessThanOrEqual(0)
+      expect(parseFloat(sharedByAll) - 61.8).toBeLessThanOrEqual(0)
       expect(sharedByAll.endsWith('kB')).toBe(true)
 
       if (_appSize.endsWith('kB')) {

test/integration/undefined-webpack-config/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  webpack() {},
+}

test/integration/undefined-webpack-config/pages/index.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'Index page'
+}

test/integration/undefined-webpack-config/test/index.test.js

@@ -0,0 +1,34 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import { launchApp, nextBuild } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '../')
+const expectedErr = /Webpack config is undefined. You may have forgot to return properly from within the "webpack" method of your next.config.js/
+
+describe('undefined webpack config error', () => {
+  it('should show in production mode', async () => {
+    const result = await nextBuild(appDir, [], {
+      stdout: true,
+      stderr: true,
+    })
+    expect(result.stderr || '' + result.stdout || '').toMatch(expectedErr)
+  })
+
+  it('should show in dev mode', async () => {
+    let output = ''
+
+    await launchApp(appDir, [], {
+      onStderr(msg) {
+        output += msg || ''
+      },
+      ontStdout(msg) {
+        output += msg || ''
+      },
+    })
+
+    expect(output).toMatch(expectedErr)
+  })
+})