chore: update to webpack v5 (#27438)

* chore: [run ci] does further prerequisites for webpack 5: https://webpack.js.org/migrate/5/#make-sure-your-build-has-no-errors-or-warnings https://webpack.js.org/migrate/5/#make-sure-to-use-mode https://webpack.js.org/migrate/5/#update-outdated-options https://webpack.js.org/migrate/5/#test-webpack-5-compatibility app builds and runs locally. Time to test out in CI and see if buffer or process need to be polyfilled by the build * chore: upgrade to webpack 5 and do the bare minimum to get it working * chore: get @packages/extension working * chore: add TODOs to finish after webpack 5 update * chore: update the webpack config for npm/webpack-batteries-included-preprocessor to be webpack 5 compliant * chore: patch whatwg-url 7.1.0. package 'source-map' uses [email protected] which has a dependency on punycode node expected API. since punycode is now polyfilled for us implicitly via the punycode npm package, the API signatures are a bit different https://github.com/mathiasbynens/punycode.js/blob/main/punycode.js#L101 vs https://nodejs.org/api/punycode.html#punycodeucs2. The patch uses the punycode npm package expected API and is needed for source maps to work for cy.origin() dependencies for Cypress.require() * chore: convert whatwg patch into dev patch as source-map is not installed when building the binary / installing prod dependencies * chore: only move production level patches into the binary dist directory for yarn install --production * chore: remove --openssl-legacy-provider code for node versions 17 and over as webpack has been updated to v5 * chore: fix the webpack-batteries-included-preprocessor tests by shimming the correct node globals and built ins * chore: provide the define plugin and evalDevtoolPlugin again as we need define in order to build the react-dom library correctly in the bundle to not include the development version * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: fix the webpack preprocessor not to change promise references under the hood when compiling the first bundle, as it was causing the webpack preprocessor to hang as the reference itself was different * chore: fix issues from readFile that were caused by Webpack 5 using 'path-browserify' * chore: update chrome component testing snapshots to match Webpack 5 changes * chore: fix mismatched snapshots from webpack 5 update * chore: use Cypress.Buffer instead of Buffer for selectFile system test to avoid having to polyfill Buffer from webpack * chore: fix system test webpack path that now includes e2e workspace * chore: patch enhanced-resolve to properly discover the pnp api for the yarn_v3.1.1_pnp_spec.ts system test. see webpack/enhanced-resolve#263 for more details * chore: set stats to 'none' for experimentalSingleTabMode to prevent different webpack compiled terminal formatting in the snapshot between local and CI. * chore: fix node built in tests and configure webpack-batteries-included-preprocessor correctly * chore: fallback to buffer correctly in config, even though there is no impact due to the provide plugin * Update binary-cleanup.js to exclude added build dependencies for webpack 5 added by webpack-terser-plugin under the hood * chore: add stream-browserify to webpack preprocessor batteries included as a dep as its used in the config [run ci] * chore: make sure process and buffer are installed in the CLI for webpack provide * chore: build cross platform binaries [run ci] * chore: fix webpack evalDevToolPlugin instantiation [run ci] * run all binary jobs [run ci] * chore: updating v8 snapshot cache * add find-up to the entry points that need to be kept * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: fix mocha build warnings * chore: fix STRIPPED_INTEGRITY_TAG import warnings * chore: add changelog event --------- Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com> Co-authored-by: Ryan Manuel <[email protected]>
cypress-io · Aug 9, 2023 · 171d1fa · 171d1fa · cypress-bot · Aug 9, 2023
1 parent b170431
commit 171d1fa
Show file tree

Hide file tree

Showing 43 changed files with 857 additions and 897 deletions.
diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
@@ -31,7 +31,7 @@ mainBuildFilters: &mainBuildFilters
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
         - 'chore/update_webpack_deps_to_latest_webpack4_compat'
-        - 'chore/use_cloud_m1_runners'
+        - 'chore/update_to_webpack5_minimum_lift'
         - 'publish-binary'
 
 # usually we don't build Mac app - it takes a long time
@@ -44,7 +44,7 @@ macWorkflowFilters: &darwin-workflow-filters
     # 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: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -56,7 +56,7 @@ linuxArm64WorkflowFilters: &linux-arm64-workflow-filters
     # 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: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
     - equal: [ 'publish-binary', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -78,7 +78,7 @@ windowsWorkflowFilters: &windows-workflow-filters
     # 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: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
-    - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_to_webpack5_minimum_lift', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -148,7 +148,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" != "publish-binary" && "$CIRCLE_BRANCH" != "chore/update_webpack_deps_to_latest_webpack4_compat" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "chore/update_to_webpack5_minimum_lift" ]]; 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

diff --git a/cli/CHANGELOG.md b/cli/CHANGELOG.md
@@ -7,6 +7,10 @@ _Released 08/15/2023 (PENDING)_
 
 - Fixed an issue where having `cypress.config` in a nested directory would cause problems with locating the `component-index.html` file when using component testing. Fixes [#26400](https://github.com/cypress-io/cypress/issues/26400).
 
+**Dependency Updates:**
+
+- Upgraded [`webpack`](https://www.npmjs.com/package/webpack) from `v4` to `v5`. This means that we are now bundling your `e2e` tests with webpack 5. We don't anticipate this causing any noticeable changes. However, if you'd like to keep bundling your `e2e` tests with wepback 4 you can use the same process as before by pinning [@cypress/webpack-batteries-included-preprocessor](https://www.npmjs.com/package/@cypress/webpack-batteries-included-preprocessor) to `v2.x.x` and hooking into the [file:preprocessor](https://docs.cypress.io/api/plugins/preprocessors-api#Usage) plugin event. This will restore the previous bundling process. Additionally, if you're using [@cypress/webpack-batteries-included-preprocessor](https://www.npmjs.com/package/@cypress/webpack-batteries-included-preprocessor) already, a new version has been published to support webpack `v5`.
+
 ## 12.17.3
 
 _Released 08/01/2023_

diff --git a/cli/lib/util.js b/cli/lib/util.js
@@ -21,7 +21,6 @@ const isInstalledGlobally = require('is-installed-globally')
 const logger = require('./logger')
 const debug = require('debug')('cypress:cli')
 const fs = require('./fs')
-const semver = require('semver')
 
 const pkg = require(path.join(__dirname, '..', 'package.json'))
 
@@ -305,21 +304,6 @@ const util = {
       opts.ORIGINAL_NODE_OPTIONS = process.env.NODE_OPTIONS
     }
 
-    // https://github.com/cypress-io/cypress/issues/18914
-    // Node 17+ ships with OpenSSL 3 by default, so we may need the option
-    // --openssl-legacy-provider so that webpack@4 can use the legacy MD4 hash
-    // function. This option doesn't exist on Node <17 or when it is built
-    // against OpenSSL 1, so we have to detect Node's major version and check
-    // which version of OpenSSL it was built against before spawning the plugins
-    // process.
-
-    // To be removed when the Cypress binary pulls in the @cypress/webpack-batteries-included-preprocessor
-    // version that has been updated to webpack >= 5.61, which no longer relies on
-    // Node's builtin crypto.hash function.
-    if (process.versions && semver.satisfies(process.versions.node, '>=17.0.0') && semver.satisfies(process.versions.openssl, '>=3', { includePrerelease: true })) {
-      opts.ORIGINAL_NODE_OPTIONS = `${opts.ORIGINAL_NODE_OPTIONS || ''} --openssl-legacy-provider`
-    }
-
     return opts
   },
 

diff --git a/cli/package.json b/cli/package.json
@@ -55,6 +55,7 @@
     "minimist": "^1.2.8",
     "ospath": "^1.2.2",
     "pretty-bytes": "^5.6.0",
+    "process": "^0.11.10",
     "proxy-from-env": "1.0.0",
     "request-progress": "^3.0.0",
     "semver": "^7.5.3",

diff --git a/cli/test/lib/tasks/dependency_spec.js b/cli/test/lib/tasks/dependency_spec.js
@@ -0,0 +1,26 @@
+/**
+ * as of Webpack 5, dependencies that are polyfilled through the Provide plugin must be defined inside the CLI
+ * in order to guarantee there is a version of the dependency accessible by the cypress CLI, either in the cypress directory
+ * or the root of their project. Currently, these two dependencies are 'buffer' and 'process'
+ */
+describe('dependencies', () => {
+  it('process dependency exists in package.json and is available', () => {
+    const { dependencies } = require('../../../package.json')
+
+    expect(dependencies.process).to.be.ok
+
+    const process = require('process')
+
+    expect(typeof process).to.equal('object')
+  })
+
+  it('buffer dependency exists in package.json and is available', () => {
+    const { dependencies } = require('../../../package.json')
+
+    expect(dependencies.buffer).to.be.ok
+
+    const buffer = require('buffer')
+
+    expect(typeof buffer).to.equal('object')
+  })
+})
diff --git a/cli/test/lib/util_spec.js b/cli/test/lib/util_spec.js
@@ -278,68 +278,6 @@ describe('util', () => {
         ORIGINAL_NODE_OPTIONS: '--require foo.js',
       })
     })
-
-    // https://github.com/cypress-io/cypress/issues/18914
-    it('includes --openssl-legacy-provider in Node 17+ w/ OpenSSL 3', () => {
-      sandbox.stub(process.versions, 'node').value('v17.1.0')
-      sandbox.stub(process.versions, 'openssl').value('3.0.0-quic')
-
-      restoreEnv = mockedEnv({
-        NODE_OPTIONS: '--require foo.js',
-      })
-
-      let childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.eq('--require foo.js --openssl-legacy-provider')
-
-      restoreEnv()
-      restoreEnv = mockedEnv({})
-      childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.eq(' --openssl-legacy-provider')
-    })
-
-    // https://github.com/cypress-io/cypress/issues/19320
-    it('does not include --openssl-legacy-provider in Node 17+ w/ OpenSSL 1', () => {
-      sandbox.stub(process.versions, 'node').value('v17.1.0')
-      sandbox.stub(process.versions, 'openssl').value('1.0.0')
-
-      restoreEnv = mockedEnv({
-        NODE_OPTIONS: '--require foo.js',
-      })
-
-      let childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.eq('--require foo.js')
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).not.to.contain('--openssl-legacy-provider')
-
-      restoreEnv()
-      restoreEnv = mockedEnv({})
-      childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.be.undefined
-    })
-
-    // https://github.com/cypress-io/cypress/issues/18914
-    it('does not include --openssl-legacy-provider in Node <=16', () => {
-      sandbox.stub(process.versions, 'node').value('v16.14.2')
-      sandbox.stub(process.versions, 'openssl').value('1.0.0')
-
-      restoreEnv = mockedEnv({})
-
-      let childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.be.undefined
-
-      restoreEnv = mockedEnv({
-        NODE_OPTIONS: '--require foo.js',
-      })
-
-      childOptions = util.getOriginalNodeOptions()
-
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).to.eq('--require foo.js')
-      expect(childOptions.ORIGINAL_NODE_OPTIONS).not.to.contain('--openssl-legacy-provider')
-    })
   })
 
   context('.exit', () => {

diff --git a/npm/webpack-batteries-included-preprocessor/empty.js b/npm/webpack-batteries-included-preprocessor/empty.js
diff --git a/npm/webpack-batteries-included-preprocessor/index.js b/npm/webpack-batteries-included-preprocessor/index.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 const webpackPreprocessor = require('@cypress/webpack-preprocessor')
 
 const hasTsLoader = (rules) => {
@@ -131,23 +132,51 @@ const getDefaultWebpackOptions = () => {
         loader: require.resolve('coffee-loader'),
       }],
     },
+    plugins: [
+      new webpack.ProvidePlugin({
+        Buffer: ['buffer', 'Buffer'],
+        process: 'process/browser',
+      }),
+    ],
     resolve: {
       extensions: ['.js', '.json', '.jsx', '.mjs', '.coffee'],
-      alias: {
-        'child_process': require.resolve('./empty'),
-        'cluster': require.resolve('./empty'),
-        'console': require.resolve('./empty'),
-        'dgram': require.resolve('./empty'),
-        'dns': require.resolve('./empty'),
-        'fs': require.resolve('./empty'),
-        'http2': require.resolve('./empty'),
-        'inspector': require.resolve('./empty'),
-        'module': require.resolve('./empty'),
-        'net': require.resolve('./empty'),
-        'perf_hooks': require.resolve('./empty'),
-        'readline': require.resolve('./empty'),
-        'repl': require.resolve('./empty'),
-        'tls': require.resolve('./empty'),
+      fallback: {
+        assert: require.resolve('assert/'),
+        buffer: require.resolve('buffer/'),
+        child_process: false,
+        cluster: false,
+        console: false,
+        constants: require.resolve('constants-browserify'),
+        crypto: require.resolve('crypto-browserify'),
+        dgram: false,
+        dns: false,
+        domain: require.resolve('domain-browser'),
+        events: require.resolve('events/'),
+        fs: false,
+        http: require.resolve('stream-http'),
+        https: require.resolve('https-browserify'),
+        http2: false,
+        inspector: false,
+        module: false,
+        net: false,
+        os: require.resolve('os-browserify/browser'),
+        path: require.resolve('path-browserify'),
+        perf_hooks: false,
+        punycode: require.resolve('punycode/'),
+        process: require.resolve('process/browser'),
+        querystring: require.resolve('querystring-es3'),
+        readline: false,
+        repl: false,
+        stream: require.resolve('stream-browserify'),
+        string_decoder: require.resolve('string_decoder/'),
+        sys: require.resolve('util/'),
+        timers: require.resolve('timers-browserify'),
+        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'),
       },
       plugins: [],
     },

diff --git a/npm/webpack-batteries-included-preprocessor/package.json b/npm/webpack-batteries-included-preprocessor/package.json
@@ -15,20 +15,40 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "^7.11.2",
+    "assert": "^2.0.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-add-module-exports": "^1.0.2",
+    "browserify-zlib": "^0.2.0",
+    "buffer": "^6.0.3",
     "coffee-loader": "^1.0.1",
     "coffeescript": "^1.12.7",
+    "constants-browserify": "^1.0.0",
+    "crypto-browserify": "^3.12.0",
+    "domain-browser": "^4.22.0",
+    "events": "^3.3.0",
+    "https-browserify": "^1.0.0",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "pnp-webpack-plugin": "^1.7.0",
+    "process": "^0.11.10",
+    "punycode": "^2.3.0",
+    "querystring-es3": "^0.2.1",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "timers-browserify": "^2.0.12",
     "ts-loader": "8.4.0",
     "tsconfig-package": "npm:tsconfig@^7.0.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "webpack": "^4.46.0"
+    "tty-browserify": "^0.0.1",
+    "url": "^0.11.1",
+    "util": "^0.12.5",
+    "vm-browserify": "^1.1.2",
+    "webpack": "^5.88.2"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "0.0.0-development",
     "@types/mocha": "^8.0.2",
-    "@types/webpack": "^4.41.21",
+    "@types/webpack": "^5.28.1",
     "chai": "^4.2.0",
     "fs-extra": "^9.1.0",
     "mocha": "^8.1.1",

diff --git a/npm/webpack-batteries-included-preprocessor/test/fixtures/node_builtins_spec.js b/npm/webpack-batteries-included-preprocessor/test/fixtures/node_builtins_spec.js
@@ -19,7 +19,10 @@ expect(require('net')).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('punycode')).to.be.an('object').and.have.property('encode')
+const punycode = require('punycode')
+
+expect(typeof punycode).to.equal('object')
+expect(punycode).to.have.property('encode')
 expect(require('querystring')).to.be.an('object').and.have.property('parse')
 expect(require('readline')).to.be.eql({})
 expect(require('repl')).to.be.eql({})

diff --git a/npm/webpack-preprocessor/index.ts b/npm/webpack-preprocessor/index.ts
@@ -324,10 +324,21 @@ const preprocessor: WebpackPreprocessor = (options: PreprocessorOptions = {}): F
     // this event is triggered when watching and a file is saved
     const onCompile = () => {
       debug('compile', filePath)
-      const nextBundle = utils.createDeferred<string>()
+      /**
+       * Webpack 5 fix:
+       * If the bundle is the initial bundle, do not create the deferred promise
+       * as we already have one from above. Creating additional deferments on top of
+       * the first bundle causes reference issues with the first bundle returned, meaning
+       * the promise that is resolved/rejected is different from the one that is returned, which
+       * makes the preprocessor permanently hang
+       */
+      if (!bundles[filePath].initial) {
+        const nextBundle = utils.createDeferred<string>()
+
+        bundles[filePath].promise = nextBundle.promise
+        bundles[filePath].deferreds.push(nextBundle)
+      }
 
-      bundles[filePath].promise = nextBundle.promise
-      bundles[filePath].deferreds.push(nextBundle)
       bundles[filePath].promise.finally(() => {
         debug('- compile finished for %s, initial? %s', filePath, bundles[filePath].initial)
         // when the bundling is finished, emit 'rerun' to let Cypress

diff --git a/npm/webpack-preprocessor/package.json b/npm/webpack-preprocessor/package.json
@@ -48,7 +48,7 @@
     "sinon-chai": "^3.5.0",
     "snap-shot-it": "7.9.2",
     "ts-node": "^10.9.1",
-    "webpack": "^4.46.0"
+    "webpack": "^5.88.2"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.1",

diff --git a/packages/driver/package.json b/packages/driver/package.json
@@ -83,7 +83,7 @@
     "url-parse": "1.5.9",
     "vanilla-text-mask": "5.1.1",
     "vite": "4.3.2",
-    "webpack": "^4.46.0",
+    "webpack": "^5.88.2",
     "zone.js": "0.9.0"
   },
   "files": [

diff --git a/packages/driver/src/cy/commands/files.ts b/packages/driver/src/cy/commands/files.ts
@@ -110,7 +110,14 @@ export default (Commands, Cypress, cy, state) => {
           }
 
           // Add the filename as a symbol, in case we need it later (such as when storing an alias)
-          state('current').set('fileName', basename(filePath))
+          try {
+            state('current').set('fileName', basename(filePath))
+          } catch (e) {
+            // as of Webpack 5, the "path-browserify" polyfill requires the "path"
+            // argument in "basename" to be a string. Otherwise, the function throws.
+            // when this happens, we want to set the filename to "undefined" as fallback behavior.
+            state('current').set('fileName', 'undefined')
+          }
 
           consoleProps['File Path'] = filePath
           consoleProps['Contents'] = contents

diff --git a/packages/extension/package.json b/packages/extension/package.json
@@ -34,7 +34,7 @@
     "sinon-chai": "3.3.0",
     "ts-loader": "8.4.0",
     "webextension-polyfill": "0.4.0",
-    "webpack": "4.44.2"
+    "webpack": "^5.88.2"
   },
   "files": [
     "app",