breaking: remove webpack built-ins shimmed in from webpack 4 to 5 upgrade as they should no longer be needed for most users

Author: AtofStryker

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-5-12-2025
+5-21-2025

cli/CHANGELOG.md

@@ -13,6 +13,7 @@ _Released 07/01/2025 (PENDING)_
 - The Cypress configuration wizard for Component Testing supports TypeScript 5.0 or greater. Addresses [#31187](https://github.com/cypress-io/cypress/issues/31187).
 - `@cypress/webpack-dev-server` and `@cypress/webpack-preprocessor` no longer support `webpack` version 4. Addresses [#31344](https://github.com/cypress-io/cypress/issues/31344). If you still need to use `webpack` version 4, please see our [migration guide](https://docs.cypress.io/app/references/migration-guide#Migrating-to-Cypress-150).
 - `@cypress/webpack-dev-server` no longer supports `webpack-dev-server` version 4. Addresses [#31605](https://github.com/cypress-io/cypress/issues/31605). If you still need to use `webpack-dev-server` version 4, please see our [migration guide](https://docs.cypress.io/app/references/migration-guide#Migrating-to-Cypress-150).
+- `@cypress/webpack-batteries-included-preprocessor` no longer ships with browser built-ins that came by default with Webpack 4. Please see [resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) for a list of available built-ins, as well as the [`@cypress/webpack-batteries-included-preprocessor` README](../npm/webpack-batteries-included-preprocessor/README.md) for how to add built-ins to the preprocessor.
 
 **Features:**
 

npm/webpack-batteries-included-preprocessor/README.md

@@ -22,7 +22,7 @@ npm install --save-dev @cypress/webpack-batteries-included-preprocessor @cypress
 
 ## Usage
 
-In your project's [plugins file](https://on.cypress.io/guides/tooling/plugins-guide.html):
+In your project's [cypress.config.js file](https://on.cypress.io/guides/tooling/plugins-guide.html):
 
 ```javascript
 const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
@@ -44,6 +44,29 @@ module.exports = (on) => {
 }
 ```
 
+As for version `4.x.x`, webpack built-ins are no longer shipped by default with `@cypress/webpack-batteries-included-preprocessor`. If you need to install built-ins, you can always get the default `@cypress/webpack-batteries-included-preprocessor` webpack options the preprocessor ships with and decorate them:
+
+```javascript
+const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
+
+function getWebpackOptions () {
+  const options = webpackPreprocessor.getFullWebpackOptions()
+
+  // add built-ins as needed
+  options.resolve.fallback.path = require.resolve('path-browserify')
+
+  return options
+}
+
+module.exports = (on) => {
+  on('file:preprocessor', webpackPreprocessor({
+    webpackOptions: getWebpackOptions()
+  }))
+}
+```
+
+Please see [resolve.fallback](see https://webpack.js.org/configuration/resolve/#resolvefallback) for more information on what built-ins can be shimmed.
+
 Other than the `typescript` option, this preprocessor supports the same options as [@cypress/webpack-preprocessor](https://github.com/cypress-io/cypress/tree/develop/npm/webpack-preprocessor#readme), so see its [README](https://github.com/cypress-io/cypress/tree/develop/npm/webpack-preprocessor#readme) for more information.
 
 ## Debugging

npm/webpack-batteries-included-preprocessor/index.js

@@ -1,5 +1,4 @@
 const path = require('path')
-const webpack = require('webpack')
 const Debug = require('debug')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
@@ -120,24 +119,6 @@ const getDefaultWebpackOptions = () => {
       }],
     },
     plugins: [
-      new webpack.ProvidePlugin({
-        Buffer: ['buffer', 'Buffer'],
-        // As of Webpack 5, a new option called resolve.fullySpecified, was added.
-        // This option means that a full path, in particular to .mjs / .js files
-        // in ESM packages must have the full path of an import specified.
-        // Otherwise, compilation fails as this option defaults to true.
-        // This means we need to adjust our global injections to always
-        // resolve to include the full file extension if a file resolution is provided.
-        // @see https://github.com/cypress-io/cypress/issues/27599
-        // @see https://webpack.js.org/configuration/module/#resolvefullyspecified
-
-        // Due to Pnp compatibility issues, we want to make sure that we resolve to the 'process' library installed with the binary,
-        // which should resolve on leaf app/packages/server/node_modules/@cypress/webpack-batteries-included-preprocessor and up the tree.
-        // In other words, we want to resolve 'process' that is installed with cypress (or the package itself, i.e. @cypress/webpack-batteries-included-preprocessor)
-        // and not in the user's node_modules directory as it may not exist.
-        // @see https://github.com/cypress-io/cypress/issues/27947.
-        process: require.resolve('process/browser.js'),
-      }),
       // If the user is trying to debug their bundle, we'll add the BundleAnalyzerPlugin
       // to see the size of the support file (first bundle when running `cypress open`)
       // and spec files (subsequent bundles when running `cypress open`)
@@ -146,42 +127,42 @@ const getDefaultWebpackOptions = () => {
     resolve: {
       extensions: ['.js', '.json', '.jsx', '.mjs', '.coffee'],
       fallback: {
-        assert: require.resolve('assert/'),
-        buffer: require.resolve('buffer/'),
+        assert: false,
+        buffer: false,
         child_process: false,
         cluster: false,
         console: false,
-        constants: require.resolve('constants-browserify'),
-        crypto: require.resolve('crypto-browserify'),
+        constants: false,
+        crypto: false,
         dgram: false,
         dns: false,
-        domain: require.resolve('domain-browser'),
-        events: require.resolve('events/'),
+        domain: false,
+        events: false,
         fs: false,
-        http: require.resolve('stream-http'),
-        https: require.resolve('https-browserify'),
+        http: false,
+        https: false,
         http2: false,
         inspector: false,
         module: false,
         net: false,
-        os: require.resolve('os-browserify/browser'),
-        path: require.resolve('path-browserify'),
+        os: false,
+        path: false,
         perf_hooks: false,
-        punycode: require.resolve('punycode/'),
-        process: require.resolve('process/browser.js'),
-        querystring: require.resolve('querystring-es3'),
+        punycode: false,
+        process: false,
+        querystring: false,
         readline: false,
         repl: false,
-        stream: require.resolve('stream-browserify'),
-        string_decoder: require.resolve('string_decoder/'),
-        sys: require.resolve('util/'),
-        timers: require.resolve('timers-browserify'),
+        stream: false,
+        string_decoder: false,
+        sys: false,
+        timers: false,
         tls: false,
-        tty: require.resolve('tty-browserify'),
-        url: require.resolve('url/'),
-        util: require.resolve('util/'),
-        vm: require.resolve('vm-browserify'),
-        zlib: require.resolve('browserify-zlib'),
+        tty: false,
+        url: false,
+        util: false,
+        vm: false,
+        zlib: false,
       },
       plugins: [],
     },

npm/webpack-batteries-included-preprocessor/package.json

@@ -15,35 +15,14 @@
     "@babel/preset-env": "^7.25.3",
     "@babel/preset-react": "^7.24.7",
     "@babel/runtime": "^7.25.0",
-    "assert": "^2.0.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "browserify-zlib": "^0.2.0",
-    "buffer": "^6.0.3",
     "coffee-loader": "^4.0.0",
     "coffeescript": "2.6.0",
-    "constants-browserify": "^1.0.0",
-    "crypto-browserify": "^3.12.0",
     "debug": "^4.3.4",
-    "domain-browser": "^4.22.0",
-    "events": "^3.3.0",
     "get-tsconfig": "^4.10.0",
-    "https-browserify": "^1.0.0",
-    "os-browserify": "^0.3.0",
-    "path-browserify": "^1.0.1",
-    "process": "^0.11.10",
-    "punycode": "^2.3.0",
-    "querystring-es3": "^0.2.1",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.2.0",
-    "string_decoder": "1.3.0",
-    "timers-browserify": "^2.0.12",
     "ts-loader": "9.5.2",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "tty-browserify": "^0.0.1",
-    "url": "^0.11.1",
-    "util": "^0.12.5",
-    "vm-browserify": "^1.1.2",
     "webpack": "^5.88.2",
     "webpack-bundle-analyzer": "4.10.2"
   },

npm/webpack-batteries-included-preprocessor/test/e2e/features.spec.js

@@ -60,10 +60,6 @@ describe('webpack-batteries-included-preprocessor features', () => {
     await runAndEval('node_shim_spec.js')
   })
 
-  it('shims node builtins', async () => {
-    await runAndEval('node_builtins_spec.js')
-  })
-
   it('outputs inline source map', async () => {
     const outputPath = await run('es_features_spec.js')
     const contents = await fs.readFile(outputPath)

npm/webpack-batteries-included-preprocessor/test/fixtures/node_builtins_spec.js

@@ -40,8 +40,8 @@ describe('webpack-batteries-included-preprocessor', () => {
       preprocessor = require('../../index')
       const result = preprocessor.getFullWebpackOptions('file/path', 'typescript/path')
 
-      expect(result.plugins).to.have.length(2)
-      expect(result.plugins[1].constructor.name).to.equal('BundleAnalyzerPlugin')
+      expect(result.plugins).to.have.length(1)
+      expect(result.plugins[0].constructor.name).to.equal('BundleAnalyzerPlugin')
       Debug.disable()
     })
   })

npm/webpack-batteries-included-preprocessor/test/unit/index.spec.js

@@ -40,7 +40,7 @@ describe('devServer', function () {
   // Writing to disk includes the correct source map size, where the difference will be made up from stat size vs parsed size
   // This is critical if a user is trying to debug to determine if they have large source maps or other large files in their dev-server under test
   describe('writes to disk if DEBUG=cypress-verbose:webpack-dev-server:bundle-analyzer is set', async () => {
-    const WEBPACK_DEV_SERVER_VERSIONS: (4 | 5)[] = [4, 5]
+    const WEBPACK_DEV_SERVER_VERSIONS: (5)[] = [5]
 
     beforeEach(() => {
       debug.enable('cypress-verbose:webpack-dev-server:bundle-analyzer')

npm/webpack-dev-server/test/devServer-unit.spec.ts

@@ -341,7 +341,7 @@ describe('makeWebpackConfig', () => {
   // Gives users a diagnostic output with webpack-bundle-analyzer to get a visible representation of their webpack bundle, which they can send to us
   // to give us an idea what issues they may be experiencing
   describe('enables webpack-bundle-analyzer if DEBUG=cypress-verbose:webpack-dev-server:bundle-analyzer is set', async () => {
-    const WEBPACK_VERSIONS: (4 | 5)[] = [4, 5]
+    const WEBPACK_VERSIONS: (5)[] = [5]
 
     beforeEach(() => {
       debug.enable('cypress-verbose:webpack-dev-server:bundle-analyzer')

npm/webpack-dev-server/test/makeWebpackConfig.spec.ts

@@ -1,6 +1,16 @@
 import { defineConfig } from 'cypress'
 import { snapshotCypressDirectory } from './cypress/tasks/snapshotsScaffold'
 import { uninstallDependenciesInScaffoldedProject } from './cypress/tasks/uninstallDependenciesInScaffoldedProject'
+import wbip from '@cypress/webpack-batteries-included-preprocessor'
+
+function getWebpackOptions () {
+  const options = wbip.getFullWebpackOptions()
+
+  // our tests need the path built-in for testing, so we need to shim it here into the webpack config
+  options.resolve.fallback.path = require.resolve('path-browserify')
+
+  return options
+}
 
 export default defineConfig({
   projectId: 'ypt4pf',
@@ -37,6 +47,8 @@ export default defineConfig({
         uninstallDependenciesInScaffoldedProject,
       })
 
+      on('file:preprocessor', wbip({ webpackOptions: getWebpackOptions(), typescript: require.resolve('typescript') }))
+
       return await e2ePluginSetup(on, config)
     },
   },

packages/launchpad/cypress.config.ts

@@ -66,6 +66,7 @@
     "human-interval": "1.0.0",
     "javascript-time-ago": "2.3.8",
     "markdown-it": "13.0.1",
+    "path-browserify": "1.0.1",
     "rollup-plugin-polyfill-node": "^0.7.0",
     "sinon": "13.0.2",
     "type-fest": "^2.3.4",

packages/launchpad/package.json

@@ -256,7 +256,7 @@ class RunPlugins {
       ...tsPath && { typescript: tsPath },
     }
 
-    debug('creating webpack preprocessor with options %o', options)
+    debug('creating webpack batteries included preprocessor with options %o', options)
 
     const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
 

packages/server/lib/plugins/child/run_plugins.js

@@ -16,6 +16,7 @@
     "@svgr/webpack": "8.0.1",
     "@types/webpack": "^5.28.1",
     "arraybuffer-loader": "1.0.8",
+    "assert": "2.0.0",
     "autoprefixer": "10.4.20",
     "babel-loader": "10.0.0",
     "browser-resolve": "2.0.0",

packages/web-config/package.json

@@ -121,6 +121,7 @@ export const getCommonConfig = () => {
       extensions: ['.ts', '.js', '.jsx', '.tsx', '.scss', '.json'],
       // see https://gist.github.com/ef4/d2cf5672a93cf241fd47c020b9b3066a for polyfill migration details
       fallback: {
+        assert: require.resolve('assert/'),
         buffer: require.resolve('buffer/'),
         child_process: false,
         fs: false,