chore: upgrade webpack dependencies to latest v4 compatible (#27396)

* chore: upgrade webpack dependencies to latest sub 5 compat [run ci] * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: updating v8 snapshot cache * chore: build binaries [run ci] * chore: update snapshot for darwin * chore: downgrade tsconfig-paths-webpack-loader from v4 to v3 [run ci] * [run ci] * chore: add rimraf in @packages/runner to use in prebuild command to clear out dist directory to get windows compat [run ci] * don't pass -rf flags into rimraf as it is inherit with the command --------- Co-authored-by: cypress-bot[bot] <+cypress-bot[bot]@users.noreply.github.com>
cypress-io · Jul 31, 2023 · f1454dd · f1454dd · cypress-bot · Jul 31, 2023
1 parent d0fbd29
commit f1454dd
Show file tree

Hide file tree

Showing 40 changed files with 1,022 additions and 815 deletions.
diff --git a/.circleci/workflows.yml b/.circleci/workflows.yml
@@ -30,7 +30,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'
-        - 'chore/update-electron-sub-dependencies'
+        - 'chore/update_webpack_deps_to_latest_webpack4_compat'
         - 'chore/use_cloud_m1_runners'
         - 'publish-binary'
 
@@ -43,7 +43,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: [ 'chore/update-electron-sub-dependencies', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
     - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -55,7 +55,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: [ 'chore/update-electron-sub-dependencies', << 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: [ 'publish-binary', << pipeline.git.branch >> ]
     - matches:
@@ -77,7 +77,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: [ 'chore/update-electron-sub-dependencies', << pipeline.git.branch >> ]
+    - equal: [ 'chore/update_webpack_deps_to_latest_webpack4_compat', << pipeline.git.branch >> ]
     - equal: [ 'chore/use_cloud_m1_runners', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
@@ -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-electron-sub-dependencies" ]]; then
+            echo 'if ! [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "publish-binary" && "$CIRCLE_BRANCH" != "chore/update_webpack_deps_to_latest_webpack4_compat" ]]; 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/npm/webpack-batteries-included-preprocessor/package.json b/npm/webpack-batteries-included-preprocessor/package.json
@@ -15,15 +15,15 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-react": "^7.10.4",
     "@babel/runtime": "^7.11.2",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.3.0",
     "babel-plugin-add-module-exports": "^1.0.2",
-    "coffee-loader": "^0.9.0",
+    "coffee-loader": "^1.0.1",
     "coffeescript": "^1.12.7",
     "pnp-webpack-plugin": "^1.7.0",
     "ts-loader": "8.4.0",
     "tsconfig-package": "npm:tsconfig@^7.0.0",
-    "tsconfig-paths-webpack-plugin": "^3.3.0",
-    "webpack": "^4.44.2"
+    "tsconfig-paths-webpack-plugin": "^3.5.2",
+    "webpack": "^4.46.0"
   },
   "devDependencies": {
     "@cypress/webpack-preprocessor": "0.0.0-development",

diff --git a/npm/webpack-preprocessor/package.json b/npm/webpack-preprocessor/package.json
@@ -30,7 +30,7 @@
     "@babel/preset-env": "^7.0.0",
     "@types/mocha": "9.0.0",
     "@types/webpack": "^4.41.12",
-    "babel-loader": "^8.0.2",
+    "babel-loader": "^8.3.0",
     "chai": "4.1.2",
     "chalk": "3.0.0",
     "chokidar-cli": "2.1.0",
@@ -48,12 +48,12 @@
     "sinon-chai": "^3.5.0",
     "snap-shot-it": "7.9.2",
     "ts-node": "^10.9.1",
-    "webpack": "^4.44.2"
+    "webpack": "^4.46.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.1",
     "@babel/preset-env": "^7.0.0",
-    "babel-loader": "^8.0.2 || ^9",
+    "babel-loader": "^8.3 || ^9",
     "webpack": "^4 || ^5"
   },
   "files": [

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.44.2",
+    "webpack": "^4.46.0",
     "zone.js": "0.9.0"
   },
   "files": [

diff --git a/packages/reporter/package.json b/packages/reporter/package.json
@@ -35,8 +35,8 @@
     "react-dom": "16.8.6",
     "react-svg-loader": "3.0.3",
     "sinon": "7.5.0",
-    "webpack": "^4.44.2",
-    "webpack-cli": "3.3.2"
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.10.0"
   },
   "files": []
 }
diff --git a/packages/reporter/webpack.config.ts b/packages/reporter/webpack.config.ts
@@ -1,7 +1,9 @@
-import { getCommonConfig, HtmlWebpackPlugin } from '@packages/web-config/webpack.config.base'
+import { getCommonConfig, HtmlWebpackPlugin, getCleanWebpackPlugin } from '@packages/web-config/webpack.config.base'
 import path from 'path'
 import type { Configuration } from 'webpack'
 
+const CleanWebpackPlugin = getCleanWebpackPlugin()
+
 // @ts-ignore
 const config: Configuration = {
   ...getCommonConfig(),
@@ -23,6 +25,7 @@ config.plugins = [
     template: path.resolve(__dirname, 'static/index.html'),
     inject: false,
   }),
+  new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
 ]
 
 config.resolve = {

diff --git a/packages/runner/package.json b/packages/runner/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "browser": "src/index.js",
   "scripts": {
+    "prebuild": "rimraf ./dist",
     "build": "node ../../scripts/run-webpack",
     "build-prod": "cross-env NODE_ENV=production yarn build",
     "clean-deps": "rimraf node_modules",
@@ -17,8 +18,9 @@
     "babel-plugin-prismjs": "1.0.2",
     "bluebird": "3.5.3",
     "cross-env": "6.0.3",
-    "webpack": "^4.44.2",
-    "webpack-cli": "3.3.2"
+    "rimraf": "^5.0.1",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.10.0"
   },
   "files": [
     "dist"

diff --git a/packages/runner/webpack.config.ts b/packages/runner/webpack.config.ts
@@ -116,10 +116,12 @@ export default async function () {
   mainConfig.plugins = [
     // @ts-ignore
     ...mainConfig.plugins,
-    new CopyWebpackPlugin([{
-      // @ts-ignore // There's a race condition in how these types are generated.
-      from: cyIcons.getPathToFavicon('favicon.ico'),
-    }]),
+    new CopyWebpackPlugin({
+      patterns: [{
+        // @ts-ignore // There's a race condition in how these types are generated.
+        from: cyIcons.getPathToFavicon('favicon.ico'),
+      }],
+    }),
   ]
 
   return [

diff --git a/packages/server/package.json b/packages/server/package.json
@@ -160,7 +160,7 @@
     "@types/http-proxy": "1.17.4",
     "@types/mime": "3.0.1",
     "@types/node": "14.14.31",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.3.0",
     "chai": "1.10.0",
     "chai-as-promised": "7.1.1",
     "chai-subset": "1.6.0",
@@ -192,7 +192,7 @@
     "ts-loader": "8.4.0",
     "tsconfig-paths": "3.10.1",
     "tslint": "^6.1.3",
-    "webpack": "^4.44.2",
+    "webpack": "^4.46.0",
     "ws": "5.2.3",
     "xvfb": "https://github.com/cypress-io/node-xvfb.git#22e3783c31d81ebe64d8c0df491ea00cdc74726a",
     "xvfb-maybe": "0.2.1"

diff --git a/packages/web-config/package.json b/packages/web-config/package.json
@@ -18,28 +18,28 @@
     "ansi-escapes": "4.3.1",
     "arraybuffer-loader": "1.0.8",
     "autoprefixer": "9.7.4",
-    "babel-loader": "8.1.0",
-    "browser-resolve": "1.11.3",
+    "babel-loader": "8.3.0",
+    "browser-resolve": "2.0.0",
     "chai": "4.2.0",
     "chalk": "2.4.2",
-    "clean-webpack-plugin": "2.0.2",
-    "copy-webpack-plugin": "5.1.2",
-    "css-loader": "2.1.1",
+    "clean-webpack-plugin": "4.0.0",
+    "copy-webpack-plugin": "6.4.1",
+    "css-loader": "5.2.7",
     "css-modules-typescript-loader": "4.0.1",
-    "extract-text-webpack-plugin": "4.0.0-beta.0",
-    "file-loader": "4.3.0",
+    "file-loader": "6.2.0",
     "html-webpack-plugin": "4.5.2",
     "jsdom": "13.2.0",
-    "mini-css-extract-plugin": "1.5.0",
+    "mini-css-extract-plugin": "1.6.2",
     "mock-require": "3.0.3",
-    "node-sass-glob-importer": "5.3.2",
-    "postcss-loader": "3.0.0",
-    "resolve-url-loader": "3.1.0",
-    "sass": "1.44.0",
-    "sass-loader": "10.1.0",
+    "node-sass-glob-importer": "5.3.3",
+    "postcss": "^8.4.27",
+    "postcss-loader": "4.3.0",
+    "resolve-url-loader": "5.0.0",
+    "sass": "1.64.1",
+    "sass-loader": "10.4.1",
     "sinon-chai": "3.3.0",
-    "webpack": "^4.44.2",
-    "webpack-cli": "3.3.2",
-    "webpack-livereload-plugin": "2.3.0"
+    "webpack": "^4.46.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-livereload-plugin": "3.0.2"
   }
 }
diff --git a/packages/web-config/webpack.config.base.ts b/packages/web-config/webpack.config.base.ts
@@ -1,5 +1,5 @@
 import chalk from 'chalk'
-import CleanWebpackPlugin from 'clean-webpack-plugin'
+import { CleanWebpackPlugin } from 'clean-webpack-plugin'
 const webpack = require('webpack')
 import { RuleSetRule, DefinePlugin, Configuration } from 'webpack'
 // @ts-ignore
@@ -76,15 +76,18 @@ function makeSassLoaders ({ modules }: { modules: boolean }): RuleSetRule {
         loader: require.resolve('css-loader'),
         options: {
           // sourceMap: true,
+          // esModule: false,
           modules,
         },
       }, // translates CSS into CommonJS
       {
         loader: require.resolve('postcss-loader'),
         options: {
-          plugins: [
-            require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'], cascade: false }),
-          ],
+          postcssOptions: {
+            plugins: [
+              require('autoprefixer')({ overrideBrowserslist: ['last 2 versions'], cascade: false }),
+            ],
+          },
         },
       },
       {
@@ -193,7 +196,6 @@ export const getCommonConfig = () => {
     },
 
     plugins: [
-      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
       new MiniCSSExtractWebpackPlugin(),
 
       // Enable source maps / eval maps
@@ -215,7 +217,7 @@ export const getCommonConfig = () => {
           : evalDevToolPlugin
         ),
       ],
-      ...(liveReloadEnabled ? [new LiveReloadPlugin({ appendScriptTag: 'true', port: 0, hostname: 'localhost', protocol: 'http' })] : []),
+      ...(liveReloadEnabled ? [new LiveReloadPlugin({ appendScriptTag: true, port: 0, hostname: 'localhost', protocol: 'http' })] : []),
     ],
 
     cache: true,
@@ -279,14 +281,14 @@ export const getSimpleConfig = () => ({
       },
     ],
   },
-
-  plugins: [
-    new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
-  ],
 })
 
 export { HtmlWebpackPlugin }
 
 export function getCopyWebpackPlugin () {
   return require('copy-webpack-plugin')
 }
+
+export function getCleanWebpackPlugin () {
+  return CleanWebpackPlugin
+}
diff --git a/system-tests/package.json b/system-tests/package.json
@@ -35,7 +35,7 @@
     "@packages/ts": "0.0.0-development",
     "@types/chai": "4.2.15",
     "@types/mocha": "9.1.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.3.0",
     "base64url": "^3.0.1",
     "bluebird": "3.7.2",
     "body-parser": "1.19.0",
@@ -84,7 +84,7 @@
     "supertest": "4.0.2",
     "systeminformation": "5.16.9",
     "temp-dir": "^2.0.0",
-    "webpack": "^4.44.2",
+    "webpack": "^4.46.0",
     "ws": "5.2.3"
   },
   "types": "lib/fixtures.ts",

diff --git a/system-tests/projects/cra-ejected/package.json b/system-tests/projects/cra-ejected/package.json
@@ -2,6 +2,10 @@
   "name": "cra-ejected",
   "version": "0.1.0",
   "private": true,
+  "scripts": {
+    "start": "node scripts/start.js",
+    "build": "node scripts/build.js"
+  },
   "dependencies": {
     "@babel/core": "^7.16.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
@@ -10,7 +14,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "babel-jest": "^27.4.2",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.3.0",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
     "bfj": "^7.0.2",
@@ -53,9 +57,10 @@
     "webpack-manifest-plugin": "^4.0.2",
     "workbox-webpack-plugin": "^6.4.1"
   },
-  "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js"
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   },
   "browserslist": {
     "production": [
@@ -69,10 +74,5 @@
       "last 1 safari version"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "projectFixtureDirectory": "cra"
 }
diff --git a/system-tests/projects/cra-ejected/yarn.lock b/system-tests/projects/cra-ejected/yarn.lock
@@ -2306,10 +2306,10 @@ babel-jest@^27.4.2:
     graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-babel-loader@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+babel-loader@^8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.3.0.tgz#124936e841ba4fe8176786d6ff28add1f134d6a8"
+  integrity sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"