remove certain built-ins from the preprocessor and see what breaks

Remove ALL built ins and see what falls over

Author: AtofStryker

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')
 
@@ -117,65 +116,45 @@ const getDefaultWebpackOptions = () => {
         loader: require.resolve('coffee-loader'),
       }],
     },
-    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'),
-      }),
-    ],
     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: [],
     },
@@ -187,7 +166,18 @@ const typescriptExtensionRegex = /\.tsx?$/
 const preprocessor = (options = {}) => {
   return (file) => {
     if (!options.typescript && typescriptExtensionRegex.test(file.filePath)) {
-      return Promise.reject(new Error(`You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support.\n\nThe file: ${file.filePath}`))
+      // Attempt to discover the user's typescript path assuming they aren't explicitly opting out of TypeScript
+      if (options.typescript !== false) {
+        try {
+          const typescriptPath = require.resolve('typescript', { paths: [file.filePath] })
+
+          options.typescript = typescriptPath
+        } catch (err) {
+          return Promise.reject(new Error(`You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support.\n\nThe file: ${file.filePath}`))
+        }
+      } else {
+        return Promise.reject(new Error(`You are attempting to run a TypeScript file, but do not have TypeScript transpilation enabled. Please either pass in your typescript path or set typescript to true.\n\nThe file: ${file.filePath}`))
+      }
     }
 
     options.webpackOptions = options.webpackOptions || getDefaultWebpackOptions()

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"
   },
   "devDependencies": {

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

@@ -60,9 +60,10 @@ describe('webpack-batteries-included-preprocessor features', () => {
     await runAndEval('node_shim_spec.js')
   })
 
-  it('shims node builtins', async () => {
-    await runAndEval('node_builtins_spec.js')
-  })
+  // Node built-ins are tested in the /cypress/system-tests/test/plugins_spec.js system test. Built-ins needs to be tested there as the preprocessor execution
+  // code runs in the browser as opposed to an eval() in the node environment (like these unit tests).
+  // For instance, require('events') is not available in the browser but is available in the eval() node context
+  // because the 'events' dependency is installed by another dependency and webpack is smart enough to find and source it in the node_modules tree.
 
   it('outputs inline source map', async () => {
     const outputPath = await run('es_features_spec.js')
@@ -105,20 +106,24 @@ describe('webpack-batteries-included-preprocessor features', () => {
       await runAndEval('tsx_spec.tsx', { ...options, ...preprocessor.defaultOptions })
     })
 
-    it('errors when processing .ts file and typescript option is not set', () => {
-      return run('ts_spec.ts')
+    it('errors when processing .ts file and typescript option is set explicitly to false', () => {
+      return run('ts_spec.ts', {
+        typescript: false,
+      })
       .then(shouldntResolve)
       .catch((err) => {
-        expect(err.message).to.include(`You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support`)
+        expect(err.message).to.include(`You are attempting to run a TypeScript file, but do not have TypeScript transpilation enabled. Please either pass in your typescript path or set typescript to true.`)
         expect(err.message).to.include('ts_spec.ts')
       })
     })
 
-    it('errors when processing .tsx file and typescript option is not set', () => {
-      return run('tsx_spec.tsx')
+    it('errors when processing .tsx file and typescript option is set explicitly to false', () => {
+      return run('tsx_spec.tsx', {
+        typescript: false,
+      })
       .then(shouldntResolve)
       .catch((err) => {
-        expect(err.message).to.include(`You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support`)
+        expect(err.message).to.include(`You are attempting to run a TypeScript file, but do not have TypeScript transpilation enabled. Please either pass in your typescript path or set typescript to true.`)
         expect(err.message).to.include('tsx_spec.tsx')
       })
     })

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

@@ -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() }))
+
       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

@@ -264,7 +264,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,