chore: add minimal built-ins back in to @cypress/webpack-batteries-included-preprocessor (#31815)

* chore: re-add the buffer, path, process, os, and stream built-ins to wbip

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

Co-authored-by: Jennifer Shehane <[email protected]>

* chore: add process to built in test

---------

Co-authored-by: Jennifer Shehane <[email protected]>

Author: AtofStryker

.circleci/workflows.yml

@@ -38,7 +38,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'update-chrome-stable-from-136.0.7103.113-beta-from-137.0.7151.40'
+        - 'feat/add_built_ins_minimal'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -49,11 +49,7 @@ macWorkflowFilters: &darwin-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal:
-          [
-            'update-chrome-stable-from-136.0.7103.113-beta-from-137.0.7151.40',
-            << pipeline.git.branch >>
-          ]
+      - equal: [ 'feat/add_built_ins_minimal', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -64,11 +60,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal:
-          [
-            'update-chrome-stable-from-136.0.7103.113-beta-from-137.0.7151.40',
-            << pipeline.git.branch >>
-          ]
+      - equal: [ 'feat/add_built_ins_minimal', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -91,11 +83,7 @@ windowsWorkflowFilters: &windows-workflow-filters
       - equal: [ develop, << pipeline.git.branch >> ]
       # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
       - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-      - equal:
-          [
-            'update-chrome-stable-from-136.0.7103.113-beta-from-137.0.7151.40',
-            << pipeline.git.branch >>
-          ]
+      - equal: [ 'feat/add_built_ins_minimal', << pipeline.git.branch >> ]
       - matches:
           pattern: /^release\/\d+\.\d+\.\d+$/
           value: << pipeline.git.branch >>
@@ -169,7 +157,7 @@ commands:
           name: Set environment variable to determine whether or not to persist artifacts
           command: |
             echo "Setting SHOULD_PERSIST_ARTIFACTS variable"
-            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "update-chrome-stable-from-136.0.7103.113-beta-from-137.0.7151.40" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "feat/add_built_ins_minimal" ]]; then
                 export SHOULD_PERSIST_ARTIFACTS=true
             fi' >> "$BASH_ENV"
   # You must run `setup_should_persist_artifacts` command and be using bash before running this command

cli/CHANGELOG.md

@@ -13,7 +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).
-- The `@cypress/webpack-batteries-included-preprocessor` no longer includes browser built-ins that were automatically provided by Webpack 4. To add built-ins manually, refer to the Webpack [resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) documentation and the [`@cypress/webpack-batteries-included-preprocessor` README](../npm/webpack-batteries-included-preprocessor/README.md). Addresses [#31039](https://github.com/cypress-io/cypress/issues/31039).
+- In order to better align with best practices, `@cypress/webpack-batteries-included-preprocessor` no longer includes certain browser built-ins that were automatically provided by Webpack 4. The removed built-ins are `assert`, `constants`, `crypto`, `domain`, `events`, `http`, `https`, `punycode`, `querystring`, `string_decoder`, `sys`, `timers`, `tty`, `url`, `util`, `vm`, and `zlib`. However, we know that certain built-ins are popular, given that many users have files that are shared between their Cypress tests and node context. Because of this, `@cypress/webpack-batteries-included-preprocessor` will ship with built-in support for `buffer`, `path`, `process`, `os`, and `stream`. If there is a built-in that isn't supported be default and you need to add support, please refer to the Webpack [resolve.fallback](https://webpack.js.org/configuration/resolve/#resolvefallback) documentation and the [`@cypress/webpack-batteries-included-preprocessor` README](../npm/webpack-batteries-included-preprocessor/README.md). Addresses [#31039](https://github.com/cypress-io/cypress/issues/31039).
 - The application under test's `pagehide` event in Chromium browsers will no longer trigger Cypress's `window:unload` event. Addressed in [#31853](https://github.com/cypress-io/cypress/pull/31853).
 
 **Features:**

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

@@ -44,7 +44,7 @@ module.exports = (on) => {
 }
 ```
 
-As of version `4.x.x`, `@cypress/webpack-batteries-included-preprocessor` no longer includes Webpack built-ins by default. If your project requires them, you can retrieve the preprocessor's default Webpack options and decorate them as needed.
+As of version `4.x.x`, `@cypress/webpack-batteries-included-preprocessor` only includes the `buffer`, `path`, `process`, `os`, and `stream` built-ins. If your project requires built-ins not provided, you can retrieve the preprocessor's default Webpack options and decorate them as needed.
 
 ```javascript
 const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor')
@@ -53,7 +53,7 @@ function getWebpackOptions () {
   const options = webpackPreprocessor.getFullWebpackOptions()
 
   // add built-ins as needed
-  options.resolve.fallback.path = require.resolve('path-browserify')
+  options.resolve.fallback.zlib = require.resolve('browserify-zlib')
 
   return options
 }

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

@@ -1,6 +1,7 @@
 const path = require('path')
 const Debug = require('debug')
 const getTsConfig = require('get-tsconfig')
+const webpack = require('webpack')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
@@ -135,6 +136,24 @@ 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`)
@@ -144,7 +163,7 @@ const getDefaultWebpackOptions = () => {
       extensions: ['.js', '.json', '.jsx', '.mjs', '.coffee'],
       fallback: {
         assert: false,
-        buffer: false,
+        buffer: require.resolve('buffer/'),
         child_process: false,
         cluster: false,
         console: false,
@@ -161,15 +180,15 @@ const getDefaultWebpackOptions = () => {
         inspector: false,
         module: false,
         net: false,
-        os: false,
-        path: false,
+        os: require.resolve('os-browserify/browser'),
+        path: require.resolve('path-browserify'),
         perf_hooks: false,
         punycode: false,
-        process: false,
+        process: require.resolve('process/browser.js'),
         querystring: false,
         readline: false,
         repl: false,
-        stream: false,
+        stream: require.resolve('stream-browserify'),
         string_decoder: false,
         sys: false,
         timers: false,

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

@@ -17,10 +17,15 @@
     "@babel/runtime": "^7.25.0",
     "babel-loader": "^10.0.0",
     "babel-plugin-add-module-exports": "^1.0.2",
+    "buffer": "^6.0.3",
     "coffee-loader": "^4.0.0",
     "coffeescript": "2.6.0",
     "debug": "^4.3.4",
     "get-tsconfig": "^4.10.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "stream-browserify": "^3.0.0",
     "ts-loader": "9.5.2",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "webpack": "^5.88.2",

npm/webpack-batteries-included-preprocessor/test/unit/index.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(1)
-      expect(result.plugins[0].constructor.name).to.equal('BundleAnalyzerPlugin')
+      expect(result.plugins).to.have.length(2)
+      expect(result.plugins[1].constructor.name).to.equal('BundleAnalyzerPlugin')
       Debug.disable()
     })
   })

packages/launchpad/cypress.config.ts

@@ -1,16 +1,6 @@
 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',
@@ -47,8 +37,6 @@ export default defineConfig({
         uninstallDependenciesInScaffoldedProject,
       })
 
-      on('file:preprocessor', wbip({ webpackOptions: getWebpackOptions(), typescript: require.resolve('typescript') }))
-
       return await e2ePluginSetup(on, config)
     },
   },

packages/launchpad/package.json

@@ -66,7 +66,6 @@
     "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",

system-tests/projects/node-builtins/cypress/e2e/node_builtins.cy.js

@@ -1,6 +1,6 @@
-it('does not support any node builtins', () => {
+it('only supports a handful of built-ins that are popular amongst cypress projects', () => {
   expect(require('assert')).to.be.eql({})
-  expect(require('buffer')).to.be.eql({})
+  expect(require('buffer')).to.be.an('object').and.have.property('Buffer')
   expect(require('child_process')).to.be.eql({})
   expect(require('cluster')).to.be.eql({})
   expect(require('console')).to.be.eql({})
@@ -17,14 +17,15 @@ it('does not support any node builtins', () => {
   expect(require('inspector')).to.be.eql({})
   expect(require('module')).to.be.eql({})
   expect(require('net')).to.be.eql({})
-  expect(require('os')).to.be.eql({})
-  expect(require('path')).to.be.eql({})
+  expect(require('os')).to.be.an('object').and.have.property('platform')
+  expect(require('path')).to.be.an('object').and.have.property('join')
   expect(require('perf_hooks')).to.eql({})
+  expect(require('process')).to.be.an('object').and.have.property('env')
   expect(require('punycode')).to.be.eql({})
   expect(require('querystring')).to.be.eql({})
   expect(require('readline')).to.be.eql({})
   expect(require('repl')).to.be.eql({})
-  expect(require('stream')).to.be.eql({})
+  expect(require('stream')).to.be.a('function').and.have.property('Readable')
   expect(require('string_decoder')).to.be.eql({})
   expect(require('sys')).to.be.eql({})
   expect(require('timers')).to.be.eql({})

system-tests/projects/screenshots/cypress.config.js

@@ -1,18 +1,8 @@
 const path = require('path')
 const Jimp = require('jimp')
 const _ = require('lodash')
-const wbip = require('@cypress/webpack-batteries-included-preprocessor')
 const { useFixedBrowserLaunchSize } = require('@tooling/system-tests/lib/pluginUtils')
 
-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
-}
-
 module.exports = {
   'e2e': {
     setupNodeEvents (on, config) {
@@ -22,8 +12,6 @@ module.exports = {
         return options
       })
 
-      on('file:preprocessor', wbip({ webpackOptions: getWebpackOptions() }))
-
       on('task', {
         'ensure:pixel:color' ({ name, colors, devicePixelRatio }) {
           const imagePath = path.join(__dirname, 'cypress', 'screenshots', `${name}.png`)

system-tests/projects/screenshots/package.json

@@ -1,9 +1,4 @@
 {
   "name": "screenshots",
-  "version": "0.0.0",
-  "dependencies": {
-    "@cypress/webpack-batteries-included-preprocessor": "file:../../../npm/webpack-batteries-included-preprocessor",
-    "@cypress/webpack-preprocessor": "file:../../../npm/webpack-preprocessor",
-    "path-browserify": "1.0.1"
-  }
+  "version": "0.0.0"
 }