Investigate Webpack 5 Impact

[emilyrohrbough]

What would you like?

Investigate upgrading Cypress to webpack v5+.

Details

The following modules could / will be impacted:

• cypress-webpack-preprocessor
  • peer/devDep v4 & v5
  • MVB to only support webpack v5
• cypress-webpack-batteries-included-preprocessor
  • dep v4 - MVB
• cypress-webpack-dev-server
  • devDep v4

The packages within the Cypress Binary that could / will be impacted:

• webpack-gui
• driver
• extensions
• reporter
• runner
• runner-ct
• server
• ui-component
• web-config

Why is this needed?

1. Be on the latest webpack version
2. Better Node 17 handling - see Cypress 9.0.0 + Node 17.1 (Win 11) Crashes #18914 & Cypress 9.1.1 + Node 17.2 (Win 11) Crashes  #19320

[emilyrohrbough]

Webpack 5 Analysis

This evaluation was purely for updating to webpack 5 with minimal configuration changes to maintain the current configuration behavior.

This did not take into account any issues that might be logged related to webpack.

npm

angular

impact: none to consumers / low for dev setup not yet released on npm

Note: for Component Testing

• dev-dependency updates:
  • @cypress/webpack-dev-server
  • @cypress/webpack-preprocessor (maybe)
  • html-webpack-plugin
  • webpack
• webpack configuration updates (./cypress/plugins/webpack.config.js)

design-system

impact: none to consumers / low for dev setup

Note: for Component Testing

• dev-dependency updates:
  • tsconfig-paths-webpack-plugin
  • webpack
• configuration updates (./.storybook/main.js)

react

impact: major version bump

Note: for Component Testing

• missing dependencies:
  • @craco/craco (webpack config)
  • react-scripts
• dev-dependency updates:
  • @cypress/webpack-dev-server
  • various webpack plugins
  • @craco/craco (webpack config)
  • next -- (webpack config)
  • react-scripts - bump to 5 -- passivity with lower?
  • webpack
  • webpack-cli
• peer dependency updates:
  • bump cypress minimum version
  • bump webpack minimum to v5.61
  • possibly bump next
  • add react-scripts
  • add @craco/craco
• webpack configuration updates
  • ./cypress/plugins/index.js
  • ./plugins/babel/getBabelWebpackConfig.js
• examples
  • quite a few minor dependency updates within the example projects

vue

impact: none to consumers / low for dev setup

Note: for Component Testing

• dependency updates:
  • @cypress/webpack-dev-server
  • various webpack plugins
  • webpack
• peer dependency updates:
  • bump cypress minimum version
• webpack configuration updates
  • ./webpack.config.js

webpack-batteries-included-preprocessor

impact: major version bump

Add support for webpack 5 usage & change the hashFunction output configuration value from 'md4'. This will requires test updates - the current tests are not sufficient.

Options:

• Major Version Bump to bump webpack dependency to v5

• Major Version Bump to move webpack dependency to be a peer dependency to support either webpack v5

• Major Version Bump to move webpack dependency to be a peer dependency to support either webpack v4 and v5

  • I do not suggest this option; users can install the pervious version of @cypress/webpack-batteries-included-preprocessor if they need webpack 4

• dependency updates:

  • webpack

• dev-dependency updates:

  • @types/webpack

• potential peer dependency updates:

  • add webpack
  • bump @cypress/webpack-preprocessor

• webpack configuration updates

  • ./index.js

webpack-dev-server

impact: low

Update peer dependencies and add check for webpack 5 usage to change the hashFunction output configuration value from 'md4'.

Currently package supports webpack-dev-server v3 and v4 in the code; however, the peer dependencies for webpack-dev-server & webpack do not reflect the code support. Webpack-dev-server v4 supports webpack 4 & 5.

• dev-dependency updates:
  • @types/webpack
  • webpack
• peer dependency updates:
  • bump or open-up html-webpack-plugin version >=4 || >=5
  • bump or open-up webpack
  • fix/bump webpack-dev-server currently (set to v3 but we support v4)
• webpack configuration updates
  • ./src/webpack.config.js

webpack-preprocessor

impact: none or major version bump.

Currently compatible with webpack 4 & 5 and we test both versions. We can leave as is or release a MVB to only support webpack 5.

If we don't do a MVB, I suggest we default our tests / dependencies to webpack 5 and test backwards compatibility, but wouldn't be required.

• dev-dependency updates:
  • cypress/webpack-dev-server
  • various webpack plugins
  • webpack
• peer dependency updates:
  • bump webpack minimum to v5.61

packages

desktop-gui

impact: low

Custom webpack configuration & preprocessor used in plugin setup for cypress tests.

We could maintain webpack 4 version to have no changes right away if we wanted.

Else update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:

  • add @cypress/webpack-dev-server (missing)
  • @cypress/webpack-preprocessor (maybe)
  • @packages/web-config
  • webpack
  • webpack-cli

• no webpack configuration updates -- consume updates from @packages/web-config

driver

impact: low

Custom webpack configuration & preprocessor used in plugin setup for cypress tests.

We could maintain webpack 4 version to have no changes right away if we wanted.

Else update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:

  • @cypress/webpack-preprocessor (maybe)
  • @packages/runner
  • webpack
  • webpack-cli

• webpack configuration updates

  • ./webpack.config.ts
  • consume updates from @packages/web-config

extension

impact: low

We could maintain webpack 4 version to have no changes right away if we wanted -- not tested with Cypress.

Else update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:

  • webpack

• webpack configuration updates

  • ./webpack.config.js

reporter

impact: low

We could maintain webpack 4 version to have no changes right away if we wanted. Webpack is used to generate the static assets which are served by an express server when running Cypress tests.

Else update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:

  • @cypress/webpack-preprocessor (maybe)
  • @packages/web-config
  • webpack
  • webpack-cli

• webpack configuration updates

  • ./webpack.config.ts
  • consume updates from @packages/web-config

runner

impact: low

Update configuration's hashFunction output configuration value from 'md4'.

We could maintain webpack 4 version to have no changes right away if we wanted. Webpack is used to generate the static assets -- not used in Cypress tests.

• dev-dependency updates:

  • @packages/web-config
  • webpack
  • webpack-cli

• webpack configuration updates

  • ./webpack.config.ts
  • consume updates from @packages/web-config

runner-ct

impact: medium

Webpack/webpack-dev-server is used for component testing.

Update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:

  • @cypress/webpack-dev-server (missing)
  • @cypress/webpack-preprocessor (missing)
  • @packages/web-config (missing)
  • webpack

• peer-dependency updates:

  • remove webpack-dev-middleware (not used)

• webpack configuration updates

  • ./webpack.config.ts
  • consume updates from @packages/web-config

server

impact: low

Remove Node 17 band-aid for passing --openssl-legacy-provider flag & remove corresponding tests.

• dependency updates:

  • @cypress/webpack-batteries-included-preprocessor
  • @cypress/webpack-preprocessor
  • bump to webpack 5

• no webpack configuration updates - this comes from @cypress/webpack-batteries-included-preprocessor

ui-components

impact: low

Update configuration's hashFunction output configuration value from 'md4'.

• dev-dependency updates:
  • @cypress/webpack-dev-server (missing)
  • @cypress/webpack-preprocessor (missing)
  • webpack
  • webpack-cli
• webpack configuration updates
  • ./cypress/plugin/index.js
  • ./webpack.config.ts
  • consume updates from @packages/web-config

web-config

impact: low

Update configuration's hashFunction output configuration value from 'md4' and add polyfills.

• dev-dependency updates:
  • @types/webpack
  • @types/webpack-dev-server (remove not used)
  • webpack
  • webpack-cli
• webpack configuration updates
  • ./webpack.config.base.ts

system-tests

impact: low

Add additional tests to verify webpack 4 and webpack 5 plugins work as expected.

• dev-dependency updates:
  • webpack

No Impact or Changes

The following modules were not impact and will not required changes:

• cypress cli
• @cypress/create-cypress-tests
• @cypress/cypress-schematic
• @cypress/eslint-plugin-dev
• @cypress/mount-utils
• @cypress/vite-dev-server
• @packages/config
• @packages/electron
• @packages/example
• @packages/https-proxy
• @packages/launcher
• @packages/net-stubbing
• @packages/network
• @packages/proxy
• @packages/resolve-dist
• @packages/rewriter
• @packages/root
• @packages/runner-shared
• @packages/socket
• @packages/ts

[emilyrohrbough]

I've identified the following issues in our backlog (I'm sure I missed a few as well):

Potential Issues with Passivity:

• Sample tests give plugin error #15205
• Webpack bundle stats do not log when using webpack-preprocessor and webpack v5 #18235
• Must restart Cypress to run newly added spec file when using Webpack 5 #16664
  • Existing PR to fix this issue: fix: detect newly added specs in dev-server compilation #17950
• webpack v5 error when module contains dynamic import: "Automatic publicPath is not supported in this browser" #18435

Determine if we need to polyfill Crypto

• Subtle Crypto not available in Firefox #14600

Quick Dependency Issue we need to fix:

• yarn 2 - @cypress/webpack-dev-server tried to access lodash, but it isn't declared in its dependencies #18070

Fixes:

• Cypress 9.2.1 + Node 17.1 (Win 11) Fails/Errors When Attempting Any Test #19712
• Setting up Cypress using webpack 5 and react-scripts #18992
• Unification: Support Node 17 #19600
• cypress lighthouse load test fails on Node 17.0.1 #19126
• Importing anything from @angular/cdk breaks E2E test build (Angular 13) #19066

[emilyrohrbough]

Closing this issue as complete. The work and impact has been noted for uplifting to webpack 5.

[jennifer-shehane]

Todo: create a diagram of how this all current works today and how changing to Webpack 5 would impact the logic.

[nagash77]

related to this ticket - #23416

[lmiller1990]

I wonder if the difficulty of this has changed now we are using Vite for more things and relying less on webpack?

I'm running into various issues when debugging #23637, specifically see this comment: #22795 (comment)

I don't see any major blocker here - @emilyrohrbough based on your research, how much engineering time do you think the webpack 5 update would take? I spiked into it a while back and got about 90% of CI passing in a day, so I think it's days of work -- maybe you can verify this estimate?

[ZachJW34]

Another bump here related to #23826, looks like there are security vulnerabilities with Webpack 4.

[lmiller1990]

I think we should just rip off the bandaid and solve this, I think two engineers with webpack 4/5 difference knowledge can smash this out in a week or so. I feel like the webpack4->5 changes are burnt into my brain at this point... also we are less reliant on webpack now with our usage of Vite, I think we could start by trimming down our webpack.config and potentially deleting a bunch of deps (rather than trying to update deps we may no longer need).

WDYT @ZachJW34? This might be a good example of tackling some of the tech debt we've talked about. Not right now but at some point before the end of 2022.

This is also the kind of thing @sainthkh maybe have some thoughts on, he has been knocking out a lot of technical debt lately.

[ZachJW34]

I would love to see it by end of 2022. Depending on the e2e teams workload, this issue would be something that I think the ct team could pick up after CT GA is finished.

[jordanpowell88]

Wanted to point out that the @cypress/angular package has been published on npm https://www.npmjs.com/package/@cypress/angular

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[ramosbugs]

bumping to prevent issue from closing

[lmiller1990]

Our team will revisit the analysis start of July, to see if anything has changed - it's been a while since this was previously looked at, maybe things have changed (webpack 5 is much more mature now). Maybe this is not as big a lift as it was a year ago!

This will be a breaking change, so we will need to look at the "blast radius" and see what the best option is for making this change seemlessly.

One known issue will be the lack of Node.js polyfills. I migrated packages/driver to see if it would work, the only failing tests were ones that assumed Buffer from Node.js would be polyfilled.

[cypress-bot]

Released in 12.17.4.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v12.17.4, please open a new issue.