fix: correctly handle fallbacks for webpack 5 (vercel#22497)

Co-authored-by: JJ Kasper <[email protected]>
hensansi · Feb 24, 2021 · 775bdc3 · 775bdc3
1 parent 9d2b0fc
commit 775bdc3
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 50 deletions.
diff --git a/.github/workflows/build_test_deploy.yml b/.github/workflows/build_test_deploy.yml
@@ -181,7 +181,7 @@ jobs:
       - run: yarn install --check-files
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
-      - run: xvfb-run node run-tests.js test/integration/{link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
+      - run: xvfb-run node run-tests.js test/integration/{fallback-modules,link-ref,production,basic,async-modules,font-optimization,ssr-ctx}/test/index.test.js test/acceptance/*.test.js
         if: ${{ steps.docs-change.outputs.DOCS_CHANGE != 'docs only change' }}
 
   testLegacyReact:

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -389,15 +389,6 @@ export default async function getBaseWebpackConfig(
     ],
     alias: {
       next: NEXT_PROJECT_ROOT,
-      ...(isWebpack5 && !isServer
-        ? {
-            stream: require.resolve('stream-browserify'),
-            path: require.resolve('path-browserify'),
-            crypto: require.resolve('crypto-browserify'),
-            buffer: require.resolve('buffer'),
-            vm: require.resolve('vm-browserify'),
-          }
-        : undefined),
       [PAGES_DIR_ALIAS]: pagesDir,
       [DOT_NEXT_ALIAS]: distDir,
       ...getOptimizedAliases(isServer),
@@ -406,6 +397,19 @@ export default async function getBaseWebpackConfig(
         ? clientResolveRewrites
         : clientResolveRewritesNoop,
     },
+    ...(isWebpack5 && !isServer
+      ? {
+          // Full list of old polyfills is accessible here:
+          // https://github.com/webpack/webpack/blob/2a0536cf510768111a3a6dceeb14cb79b9f59273/lib/ModuleNotFoundError.js#L13-L42
+          fallback: {
+            buffer: require.resolve('buffer'),
+            crypto: require.resolve('crypto-browserify'),
+            path: require.resolve('path-browserify'),
+            stream: require.resolve('stream-browserify'),
+            vm: require.resolve('vm-browserify'),
+          },
+        }
+      : undefined),
     mainFields: isServer ? ['main', 'module'] : ['browser', 'module', 'main'],
     plugins: isWebpack5
       ? // webpack 5+ has the PnP resolver built-in by default:

diff --git a/test/integration/build-output/test/index.test.js b/test/integration/build-output/test/index.test.js
@@ -134,46 +134,6 @@ describe('Build Output', () => {
     })
   })
 
-  describe('Crypto Application', () => {
-    let stdout
-    const appDir = join(fixturesDir, 'with-crypto')
-
-    beforeAll(async () => {
-      await remove(join(appDir, '.next'))
-    })
-
-    it('should not include crypto', async () => {
-      ;({ stdout } = await nextBuild(appDir, [], {
-        stdout: true,
-      }))
-
-      console.log(stdout)
-
-      const parsePageSize = (page) =>
-        stdout.match(
-          new RegExp(` ${page} .*?((?:\\d|\\.){1,} (?:\\w{1,})) `)
-        )[1]
-
-      const parsePageFirstLoad = (page) =>
-        stdout.match(
-          new RegExp(
-            ` ${page} .*?(?:(?:\\d|\\.){1,}) .*? ((?:\\d|\\.){1,} (?:\\w{1,}))`
-          )
-        )[1]
-
-      const indexSize = parsePageSize('/')
-      const indexFirstLoad = parsePageFirstLoad('/')
-
-      expect(parseFloat(indexSize)).toBeLessThanOrEqual(3.1)
-      expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
-      expect(indexSize.endsWith('kB')).toBe(true)
-
-      expect(parseFloat(indexFirstLoad)).toBeLessThanOrEqual(66.9)
-      expect(parseFloat(indexFirstLoad)).toBeGreaterThanOrEqual(60)
-      expect(indexFirstLoad.endsWith('kB')).toBe(true)
-    })
-  })
-
   describe('Custom App Output', () => {
     const appDir = join(fixturesDir, 'with-app')
 

diff --git a/...utput/fixtures/with-crypto/pages/index.js → ...dules/fixtures/with-crypto/pages/index.js b/...utput/fixtures/with-crypto/pages/index.js → ...dules/fixtures/with-crypto/pages/index.js
diff --git a/test/integration/fallback-modules/test/index.test.js b/test/integration/fallback-modules/test/index.test.js
@@ -0,0 +1,52 @@
+/* eslint-env jest */
+
+import 'flat-map-polyfill'
+import { remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const fixturesDir = join(__dirname, '..', 'fixtures')
+
+describe('Build Output', () => {
+  describe('Crypto Application', () => {
+    let stdout
+    const appDir = join(fixturesDir, 'with-crypto')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should not include crypto', async () => {
+      ;({ stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+
+      console.log(stdout)
+
+      const parsePageSize = (page) =>
+        stdout.match(
+          new RegExp(` ${page} .*?((?:\\d|\\.){1,} (?:\\w{1,})) `)
+        )[1]
+
+      const parsePageFirstLoad = (page) =>
+        stdout.match(
+          new RegExp(
+            ` ${page} .*?(?:(?:\\d|\\.){1,}) .*? ((?:\\d|\\.){1,} (?:\\w{1,}))`
+          )
+        )[1]
+
+      const indexSize = parsePageSize('/')
+      const indexFirstLoad = parsePageFirstLoad('/')
+
+      expect(parseFloat(indexSize)).toBeLessThanOrEqual(3.1)
+      expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
+      expect(indexSize.endsWith('kB')).toBe(true)
+
+      expect(parseFloat(indexFirstLoad)).toBeLessThanOrEqual(67.5)
+      expect(parseFloat(indexFirstLoad)).toBeGreaterThanOrEqual(60)
+      expect(indexFirstLoad.endsWith('kB')).toBe(true)
+    })
+  })
+})