Do not alias Node modules for webpack 4 (#16452)

Fixes #16259
Caused by #16022
Follow up issue: #16450

This PR skips polyfilling Node modules in webpack 4 which are ignored by the `browsers` key.

Author: Timer

package.json

@@ -112,6 +112,7 @@
     "release": "6.3.0",
     "request-promise-core": "1.1.2",
     "rimraf": "2.6.3",
+    "seedrandom": "3.0.5",
     "selenium-standalone": "6.18.0",
     "selenium-webdriver": "4.0.0-alpha.7",
     "shell-quote": "1.7.2",

packages/next/build/webpack-config.ts

@@ -366,16 +366,16 @@ export default async function getBaseWebpackConfig(
       'next/router': 'next/dist/client/router.js',
       'next/config': 'next/dist/next-server/lib/runtime-config.js',
       'next/dynamic': 'next/dist/next-server/lib/dynamic.js',
-      ...(isServer
-        ? {}
-        : {
+      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'),
-            next: NEXT_PROJECT_ROOT,
-          }),
+          }
+        : undefined),
       [PAGES_DIR_ALIAS]: pagesDir,
       [DOT_NEXT_ALIAS]: distDir,
       ...getOptimizedAliases(isServer),

test/integration/build-output/fixtures/with-crypto/pages/index.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+import seedrandom from 'seedrandom'
+
+const rng = seedrandom('hello')
+
+export default function () {
+  const [value, setValue] = useState(null)
+  useEffect(() => {
+    if (value) return
+    setValue(rng())
+  }, [value])
+  return <div>{value == null ? 'loading' : value.toString()}</div>
+}

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

@@ -134,6 +134,46 @@ 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)
+      expect(parseFloat(indexSize)).toBeGreaterThanOrEqual(2)
+      expect(indexSize.endsWith('kB')).toBe(true)
+
+      expect(parseFloat(indexFirstLoad)).toBeLessThanOrEqual(65)
+      expect(parseFloat(indexFirstLoad)).toBeGreaterThanOrEqual(60)
+      expect(indexFirstLoad.endsWith('kB')).toBe(true)
+    })
+  })
+
   describe('Custom App Output', () => {
     const appDir = join(fixturesDir, 'with-app')
 

yarn.lock

@@ -15333,6 +15333,11 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+[email protected]:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/seedrandom/-/seedrandom-3.0.5.tgz#54edc85c95222525b0c7a6f6b3543d8e0b3aa0a7"
+  integrity sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==
+
 [email protected]:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/selenium-standalone/-/selenium-standalone-6.18.0.tgz#011e0672b1b86893f77244a86ddea1b6baadfb87"