chore: bump loaders and optimize webpack configuration #27505

AtofStryker · 2023-08-09T18:35:36Z

Closes N/A

Additional details

As a follow up to #27438, this PR follows the clean up configuration guide set forth by webpack on the 4 -> 5 update and is the last step in the upgrade. This includes:

Bumping loaders to latest

loaders

ts-loader from v8 to v9 fbff60f release notes (node version deprecation and min webpack 5 support)
sass-loader from v10 to v131afd7d3 release notes (node version deprecation and min webpack 5 support). tilda imports are deprecated and aren't needed (same with css-loader) and have been removed see v11 release notes
postcss-loader from v4 to v7 ed6ed1b release notes (node version deprecation and min webpack 5 support)
css-loader from v5 to v63c6d1ee release notes (option changes that don't effect us, node version deprecation and min webpack 5 support). the esModules config is enabled by default, which we can opt to turn off if needed. tilda imports are deprecated now, which was addressed with the sass-loader commit.
babel-loader from v8 to v9 37840fd release notes
- to use babel-loader v9, babel ^7.12.0 must be used and greater than Node v14 is needed.
- This update to the loader includes and update to babel latest@7, which entails:
  - @babel/plugin-proposal-class-properties is no longer a proposal and is now @babel/plugin-transform-class-properties
  - @babel/plugin-proposal-object-rest-spread is no longer a proposal and is now @babel/plugin-transform-object-rest-spread
  - @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object are added into webpack.config.base.ts to reduce warnings of loose: true for @babel/plugin-proposal-class-properties and @babel/plugin-proposal-object-rest-spread as loose: false is the default. If loose: true is enabled for @babel/plugin-proposal-class-properties and @babel/plugin-proposal-object-rest-spread, it must be enabled for @babel/plugin-transform-private-methods and @babel/plugin-transform-private-property-in-object as well.
  - Since some of our CT webpack@4 tests had a dependency on babel-loader@8, I needed to pin it in the package.json of the system-tests to keep the dependency trees as expected 31e3a3e
coffee-loader from v1 to v4 and coffeescript from v1 to v2.6 9a7f0bf release notes. [email protected] has issues with packherd and didn't seem worth investigating at this time
Removal of file-loader as it deprecated will no longer be supported 4a8ecfe. This means a few things:
- inside the webpack.config.base.ts, we now use the preferred asset/resource type for:
  - fonts: eot, ttf,woff, and woff2
  - images: png and gif (the rule is configured but there are no image assets in the build), hence the removal pngRule inside @packages/runner
  The options are slightly different for asset/resource -> filename then they are for file-loader -> options.name, but the files resolve to the same spot. This can be verified by running yarn build inside @packages/runner
- svgs are NOT handled by asset/resource loading (as none exist to my knowledge). What we were previously doing is leverage react-svg-loader (which is no longer maintained) inside @packages/runner src files to tell webpack how to process the file since we didn't have the loader declared in config. To modernize the loader config, 4a8ecfe also:
  - removes react-svg-loader including direct references to loader importing inside @packages/reporter src code which further decouples the src from the bundling (most agree this is a good thing)
  - leverage @svgr/webpack over react-svg-loader for jsx/tsx files inside @packages/reporter. Since we no longer have explicit loader references inside the source, our reporter E2E tests need to know how to process svgs inside tsx/jsx files under test. For this, we pass the @packages/reporter webpack configuration into the @cypress/webpack-preprocessor inside the file:preprocessor plugin event inside cypress.config.ts

Plugins

mini-css-extract-plugin from v1 to v2 811cdca release notes (option changes that do not effect our config, node version deprecation and min webpack 5 support)
html-webpack-plugin from v4 to v58ba2524 release notes (option changes that do not effect our config, node version deprecation and min webpack 5 support)
copy-webpack-plugin from v6 to v11 379dc94 release notes (option changes that don't effect us, node version deprecation and min webpack 5 support)

Making small optimizations and fixing build warnings

Warning: Remove Url import from validation code as it should be available as global built in d85c75c
Optimization: Switches over config using hash to use contenthash as recommended by clean up configuration guide b668c30
Optimization: Removes the use of moduleIds and chunkIds from webpack.config.base.ts as the defaults are likely better, which is also recommended in clean up configuration guide 3f8a2e5

Misc Changes

Update the Node versions under test as a lot of the loaders now no longer support Node 12 or Node 14. We no longer support Node 12 or 14, but our binary tests were not up to date. The loader changes forces us to update them in ca0ebc3

Steps to test

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has a PR for user-facing changes been opened in cypress-documentation?
Have API changes been updated in the type definitions?

AtofStryker · 2023-08-09T21:43:39Z

system-tests/test-binary/ci_environments_spec.ts

    async (exec) => {
      const { stdout } = await exec()

      expect(stdout).to.include('Your system is missing the dependency: Xvfb')
    },
  )

+  // TODO: Where is this image located? Needs to be bumped to Node 16.16.0 or later
  smokeTestDockerImage(


anyone have any ideas? this doesn't live in the docker images repo AFAIK

cypress · 2023-08-10T02:44:04Z

8 flaky tests on run #49751 ↗︎

0	677	40	0	8

Details:

fix: turn off svgo from @svgr/webpack to preserve our scss class names within th...
Project: cypress	Commit: `661f07c3ec`
Status: Passed	Duration: 18:06 💡
Started: Aug 10, 2023 11:20 PM	Ended: Aug 10, 2023 11:38 PM

cypress\e2e\scaffold-project.cy.ts • 1 flaky test • launchpad-e2e

View Output Video

Test		Artifacts
scaffolding new projects > generates valid config file for pristine project without cypress installed		`Output` `Screenshots` `Video`

cypress\e2e\scaffold-component-testing.cy.ts • 1 flaky test • launchpad-e2e

View Output Video

Test		Artifacts
scaffolding component testing > angular-cli-unconfigured > scaffolds component testing for Angular		`Output` `Screenshots` `Video`

cypress\e2e\config-warning.cy.ts • 1 flaky test • launchpad-e2e

View Output Video

Test		Artifacts
component testing dependency warnings > warns against outdated @vue/cli dependency		`Output` `Screenshots` `Video`

cypress\e2e\error-handling.cy.ts • 2 flaky tests • launchpad-e2e

View Output Video

Test		Artifacts
... > handles missing webpack.config		`Output` `Screenshots` `Video`
... > automatically sources webpack.config.js		`Output` `Screenshots` `Video`

cypress\e2e\specs_list_latest_runs.cy.ts • 1 flaky test • app-e2e

View Output Video

Test		Artifacts
App/Cloud Integration - Latest runs and Average duration > when no runs are recorded > shows placeholders for all visible specs		`Output` `Screenshots` `Video`

The first 5 flaky specs are shown, see all 7 specs in Cypress Cloud.

_{This comment has been generated by cypress-bot as a result of this
project's GitHub integration settings.}

AtofStryker · 2023-08-10T03:22:52Z

system-tests/test/form_submissions_spec.js

@@ -149,6 +151,8 @@ describe('e2e forms', () => {
    })

    systemTests.it('passes with http on localhost', {
+      // FIXME: webkit is 404ing on redirects after the form submit on the default clientRoute /__/
+      browser: '!webkit',


I can't get these to pass on develop locally as well with webkit (pre webpack 5 updates)

AtofStryker · 2023-08-10T17:28:56Z

green CI build https://app.circleci.com/pipelines/github/cypress-io/cypress?branch=chore%2Fbump_loaders_and_optimize_webpack

AtofStryker · 2023-08-10T18:32:06Z

changes are rebased off of develop to get up to date and resolve conflicts. Commit references in readme are still accurate. Once linux job is green this is good to merge

…obally

script > 2.6.0 has issues with packheard transpilation, which likely isnt worth the squeeze here to update it further

… works with webpack 5, so we need ot pin the dep to 8 in the system-test project

…andling where applicable. Additionally, remove react-svg-loader and move to svgr loader inside the runner to bundle svgs needed for react components. Make sure that all SVGs are being imported correctly chore: tell webpack preprocessor to process svgs inside of e2e tests for the reporter. We did not need this before because we were using react-svg-loader, which was used directly in source to process the svg and allowed the svg to work under test. Since the source code is now bundler independent, we need to tell cypress to bundle the svgs under test. To do this, we pass our webpack config into @cypress/webpack-preprocessor to allow loading the svgs. This is not a breaking change.

…y better and handle caching/debugging better

…nger supported. node 12 doesnt ship with fs/promises, which causes fatal errors with babel-loader 9 try to test against new docker images [run ci]

… to the clientRoute 404ing after submitting

… 4 from hoisted deps [run ci]

…s within the svg. see https://react-svgr.com/docs/options/#svgo [run ci]

cypress-bot · 2023-08-15T20:16:15Z

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.

AtofStryker changed the title ~~Chore/bump loaders and optimize webpack~~ chore: bump loaders and optimize webpack configuration Aug 9, 2023

AtofStryker force-pushed the chore/bump_loaders_and_optimize_webpack branch from b00199c to bb29ce3 Compare August 9, 2023 19:22

AtofStryker commented Aug 9, 2023

View reviewed changes

AtofStryker force-pushed the chore/bump_loaders_and_optimize_webpack branch from 5c637cc to 089ce60 Compare August 10, 2023 02:17

AtofStryker force-pushed the chore/bump_loaders_and_optimize_webpack branch from 089ce60 to 376ac5d Compare August 10, 2023 03:19

AtofStryker commented Aug 10, 2023

View reviewed changes

AtofStryker marked this pull request as ready for review August 10, 2023 14:38

chrisbreiding self-requested a review August 10, 2023 15:02

chrisbreiding approved these changes Aug 10, 2023

View reviewed changes

nagash77 approved these changes Aug 10, 2023

View reviewed changes

AtofStryker force-pushed the chore/bump_loaders_and_optimize_webpack branch from 2d348f8 to dd5beff Compare August 10, 2023 18:31

cacieprins approved these changes Aug 10, 2023

View reviewed changes

AtofStryker added 15 commits August 10, 2023 16:22

chore: update ts-loader from v8 to v9

8e0cc58

chore: update sass-loader from v10 to v13

b011107

chore: update postcss-loader from v4 to v7

d254cfc

chore: update mini-css-extract-plugin from v1 to v2

100d489

chore: update html-webpack-plugin from v4 to v5

73bd928

chore: update css-loader from v5 to v6

87bcd02

chore: update copy-webpack-plugin from v6 to v 11

e93111d

chore: update babel and babel loader to latest

cc92c45

chore: remove Url import from validation as it should be available gl…

649d7a1

…obally

chore: update coffee-loader to latest and coffeescript to 2.6.0. coffee

6a65646

script > 2.6.0 has issues with packheard transpilation, which likely isnt worth the squeeze here to update it further

chore: fix react component tests with webpack 4 as babl loader 9 only…

c33e1a2

… works with webpack 5, so we need ot pin the dep to 8 in the system-test project

chore: switch from hash to contenthash

7f442cc

chore: remove use of moduleIds for chunkIds as the defaults are likel…

bee873f

…y better and handle caching/debugging better

chore: mark tests that need to be updated as node 12 and 14 are no lo…

c56b8a0

…nger supported. node 12 doesnt ship with fs/promises, which causes fatal errors with babel-loader 9 try to test against new docker images [run ci]

cypress-bot[bot] and others added 8 commits August 10, 2023 16:22

chore: updating v8 snapshot cache

f134d7f

chore: updating v8 snapshot cache

c1671f5

chore: updating v8 snapshot cache

64dea7e

skip http/https form submittal unit tests for experimental webkit due…

a133d60

… to the clientRoute 404ing after submitting

chore: pin webpack 5 for component tests in cy in cy to prevent using…

3957ba7

… 4 from hoisted deps [run ci]

build binaries [run ci]

df5e8d2

chore: bump circle cache [run ci]

da958e4

fix: turn off svgo from @svgr/webpack to preserve our scss class name…

661f07c

…s within the svg. see https://react-svgr.com/docs/options/#svgo [run ci]

AtofStryker force-pushed the chore/bump_loaders_and_optimize_webpack branch from dd5beff to 661f07c Compare August 10, 2023 21:09

lmiller1990 merged commit 9dd8c72 into develop Aug 11, 2023

lmiller1990 deleted the chore/bump_loaders_and_optimize_webpack branch August 11, 2023 03:54

cypress-bot bot locked as resolved and limited conversation to collaborators Aug 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: bump loaders and optimize webpack configuration #27505

chore: bump loaders and optimize webpack configuration #27505

AtofStryker commented Aug 9, 2023 •

edited

Loading

AtofStryker Aug 9, 2023

cypress bot commented Aug 10, 2023 •

edited

Loading

AtofStryker Aug 10, 2023 •

edited

Loading

AtofStryker commented Aug 10, 2023

AtofStryker commented Aug 10, 2023

cypress-bot bot commented Aug 15, 2023

chore: bump loaders and optimize webpack configuration #27505

chore: bump loaders and optimize webpack configuration #27505

Conversation

AtofStryker commented Aug 9, 2023 • edited Loading

Additional details

Bumping loaders to latest

loaders

Plugins

Making small optimizations and fixing build warnings

Misc Changes

Steps to test

How has the user experience changed?

PR Tasks

AtofStryker Aug 9, 2023

Choose a reason for hiding this comment

cypress bot commented Aug 10, 2023 • edited Loading

8 flaky tests on run #49751 ↗︎

AtofStryker Aug 10, 2023 • edited Loading

Choose a reason for hiding this comment

AtofStryker commented Aug 10, 2023

AtofStryker commented Aug 10, 2023

cypress-bot bot commented Aug 15, 2023

AtofStryker commented Aug 9, 2023 •

edited

Loading

cypress bot commented Aug 10, 2023 •

edited

Loading

AtofStryker Aug 10, 2023 •

edited

Loading