fix: loosen webpack compilation with fallbackNodePolyfills: false (#…

…40612)

If in `resolve.fallback` we set previously polyfilled modules to `false`
instead of an empty object, webpack will pass the compilation _and_ not
include any polyfills.

Fixes #40522, fixes #40364

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)

packages/next/build/webpack-config.ts

@@ -1590,7 +1590,30 @@ export default async function getBaseWebpackConfig(
                     resolve: {
                       fallback:
                         config.experimental.fallbackNodePolyfills === false
-                          ? {}
+                          ? {
+                              assert: false,
+                              buffer: false,
+                              constants: false,
+                              crypto: false,
+                              domain: false,
+                              http: false,
+                              https: false,
+                              os: false,
+                              path: false,
+                              punycode: false,
+                              process: false,
+                              querystring: false,
+                              stream: false,
+                              string_decoder: false,
+                              sys: false,
+                              timers: false,
+                              tty: false,
+                              util: false,
+                              vm: false,
+                              zlib: false,
+                              events: false,
+                              setImmediate: false,
+                            }
                           : {
                               assert: require.resolve(
                                 'next/dist/compiled/assert'

scripts/next-with-deps.sh

@@ -29,11 +29,11 @@ done
 
 if [ ! -z $HAS_CONFLICTING_DEP ] || [ ! -d "$PROJECT_DIR/node_modules" ];then
   cd $PROJECT_DIR
-  yarn install
+  pnpm install
   for dep in ${CONFLICTING_DEPS[@]};do 
     rm -rf node_modules/$dep
   done
 fi
 
 cd $START_DIR
-yarn next $@
+pnpm next $@

test/production/disable-fallback-polyfills/index.test.ts

@@ -4,6 +4,11 @@ import { NextInstance } from 'test/lib/next-modes/base'
 describe('Disable fallback polyfills', () => {
   let next: NextInstance
 
+  function getFirstLoadSize(output: string) {
+    const firstLoadRe = /○ \/\s*(\d*) k?B\s*(?<firstLoad>.*) kB/
+    return Number(output.match(firstLoadRe).groups.firstLoad)
+  }
+
   beforeAll(async () => {
     next = await createNext({
       files: {
@@ -19,21 +24,19 @@ describe('Disable fallback polyfills', () => {
           } 
         `,
       },
-      dependencies: {},
+      dependencies: {
+        axios: '0.27.2',
+      },
     })
     await next.stop()
   })
   afterAll(() => next.destroy())
 
   it('Fallback polyfills added by default', async () => {
-    const firstLoadJSSize = Number(
-      next.cliOutput.match(/○ \/\s{38}(\d*) kB\s{10}(?<firstLoad>\d*) kB/)
-        .groups.firstLoad
-    )
-    expect(firstLoadJSSize).not.toBeLessThan(200)
+    expect(getFirstLoadSize(next.cliOutput)).not.toBeLessThan(200)
   })
 
-  it('Build should fail, when fallback polyfilling is disabled', async () => {
+  it('Reduced bundle size when polyfills are disabled', async () => {
     await next.patchFile(
       'next.config.js',
       `module.exports = {
@@ -42,7 +45,29 @@ describe('Disable fallback polyfills', () => {
         }
       }`
     )
+    await next.start()
+    await next.stop()
+
+    expect(getFirstLoadSize(next.cliOutput)).toBeLessThan(200)
+  })
+
+  it('Pass build without error if non-polyfilled module is unreachable', async () => {
+    // `axios` uses `Buffer`, but it should be unreachable in the browser.
+    // https://github.com/axios/axios/blob/649d739288c8e2c55829ac60e2345a0f3439c730/lib/helpers/toFormData.js#L138
+    await next.patchFile(
+      'pages/index.js',
+      `import axios from 'axios'
+       import { useEffect } from 'react'
+
+       export default function Home() {
+         useEffect(() => {
+           axios.get('/api')
+         }, [])
+
+         return "hello world"
+       }`
+    )
 
-    await expect(next.start()).rejects.toThrow(/next build failed/)
+    await expect(next.start()).not.toReject()
   })
 })