feat(npm/webpack-preprocessor): WIP support webpack 5 alongside webpack 4

[lmiller1990]

• Closes Webpack 5 support #8900

User facing changelog

Experimental support for webpack v5 alongside webpack v4 in @cypress/webpack-preprocessor.

Additional details

Initially, I tried to make a next version of @cypress/webpack-preprocessor that would support Webpack 5. I then updated all the dependencies in the monorepo to webpack 5, and tried to get everything to pass.

I got everything to compile. I got most of the tests to pass, but not all. A lot of our dependencies (or their dependencies, etc) are coupled to webpack 4.

The main problem is that webpack 5 deprecated auto polyfills of node modules. I tried a few things, like using a polyfill, providing custom implementations. It got pretty close to passing (around 95% of specs passing in packages).

There are some hard blockers:

• some examples in npm/react/examples and npm/webpack-preprocessor/examples can never pass. Specifically, ones using tools like CRA, which have not yet upgraded to Webpack 5.
• ideally, we should upgrade Cypress to use Webpack 5, too.

For now, I think we should try and support webpack 4 an 5 alongside each other, like I've done here. The next version of @cypress/webpack-preprocessor, which will be v6, will drop support for Webpack 4. At this point we should transition Cypress to use webpack 5 internally, too. It's a big change, so it might take some time. This is another compelling reason to do this incremental update.

How has the user experience changed?

• can use with webpack v5
• users will need to deal with webpack 5 breaking changes, mainly the deprecation of auto polyfilled core node modules. They could use this polyfill for general use cases.

PR Tasks

• Have tests been added/updated?
• Has the original issue or this PR been tagged with a release in ZenHub?
• Has a PR for user-facing changes been opened in cypress-documentation?
• Have API changes been updated in the type definitions?
• Have new configuration options been added to the cypress.schema.json?

[cypress-bot]

Thanks for taking the time to open a PR!

• Create a Draft Pull Request if your PR is not ready for review. Mark the PR as Ready for Review when you're ready for a Cypress team member to review the PR.
• Become familiar with the Code Review Checklist for guidelines on coding standards and what needs to be done before a PR can be merged.

[cypress]

---

Test summary

4061 • 0 • 53 • 2 • 0

---

Run details

Project	cypress
Status	Passed
Commit	a96d11e
Started	May 13, 2021 3:12 PM
Ended	May 13, 2021 3:25 PM
Duration	12:05 💡
OS	Linux Debian - 10.8
Browser	Firefox 77

View run in Cypress Dashboard ➡️

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[agg23]

Surprising that there's so little to be done. Doesn't seem like it will cause adverse effects.

[agg23]

lol what's wrong with this debug message?

[agg23]

Possibly related:

Why do we always set up the Webpack 4 hook, even with Webpack 5, in webpack-dev-server?

cypress/npm/webpack-dev-server/src/plugin.ts

Lines 88 to 103 in a19009a

	if ('NormalModule' in webpack) {
	// @ts-ignore
	webpack.NormalModule.getCompilationHooks(compilation).loader.tap(
	'CypressCTOptionsPlugin',
	this.pluginFunc,
	)
	return
	}
	// Webpack 4
	compilation.hooks.normalModuleLoader.tap(
	'CypressCTOptionsPlugin',
	this.pluginFunc,
	)
	};

[elevatebart]

I think you should bring back the debug message. But this looks good

[WIStudent]

I think the peerDependeny in package.json also needs to be updated to allow webpack 4 and 5. Otherwise npm@7 will throw this:

$ npm install --save-dev @cypress/webpack-preprocessor
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: my-project@1.0.0
npm ERR! Found: webpack@5.39.0
npm ERR! node_modules/webpack
npm ERR!   dev webpack@"^5.39.0" from the root project
npm ERR!   peer webpack@">=2" from babel-loader@8.2.2
npm ERR!   node_modules/babel-loader
npm ERR!     dev babel-loader@"^8.2.2" from the root project
npm ERR!     peer babel-loader@"^8.0.2" from @cypress/webpack-preprocessor@5.9.0
npm ERR!     node_modules/@cypress/webpack-preprocessor
npm ERR!       dev @cypress/webpack-preprocessor@"*" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"^4.18.1" from @cypress/webpack-preprocessor@5.9.0
npm ERR! node_modules/@cypress/webpack-preprocessor
npm ERR!   dev @cypress/webpack-preprocessor@"*" from the root project

[elevatebart]

@WIStudent you are absolutely right.

Can you create an issue so that we don't forget to fix it?

Thank you in advance.