feat: support webpack-dev-server v4 #17918

ZachJW34 · 2021-08-27T16:29:31Z

Closes Component Tests hang indefinitely when using [email protected] #17846

User facing changelog

Support for webpack-dev-server v4

Additional details

This work is based on #17869 (thanks @BBB), with a few tweaks and some added test coverage of webpack-dev-server@3.
Pinned http-proxy types for @packages/server-ct since the newly added types for webpack-dev-server was resolving a newer version and causing type issues.
Changed align-items: start; to align-items: flex-start; since the newer version of webpack-dev-server was surfacing the compile warning as an overlay. I didn't want to disable the overlay since it's nice DX and it was a small change to resolve the warning.

How to test

I tested this by running the component tests inside the npm/{vue/react/angular} packages as well as linking the locally built package into the https://github.com/cypress-io/cypress-component-testing-examples repo and running those component tests. For the examples that don't explicitly depend on webpack-dev-server, I installed both v3 and v4 and made sure the server was using the corresponding package.

How has the user experience changed?

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?

…./` with a starts with req.

cypress-bot · 2021-08-27T16:29:33Z

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.

CLAassistant · 2021-08-27T16:29:34Z

All committers have signed the CLA.

giampaolo44 · 2021-08-27T16:42:55Z

@ZachJW34 @BBB is it possible that your work could solve this issue of mine? It happened just after the upgrade to WP5 and WP-dev-server4

ZachJW34 · 2021-08-27T17:46:56Z

npm/webpack-dev-server/src/startServer.ts

@@ -53,25 +53,33 @@ export async function start ({ webpackConfig: userWebpackConfig, template, optio
    hot: false,
  }

-  if (webpackDevServerPkg.version.match(/3\./)) {
+  if (webpackDevServerFacts.isV3()) {


A debug message would be nice to print the version of WDS being used.

JessicaSachs · 2021-08-27T19:11:50Z

The build step for @packages/server-ct is failing due to type issues. In general the PR looks good. To debug this, run

yarn workspace @packages/server-ct build

JessicaSachs · 2021-08-27T19:12:56Z

@ZachJW34 @BBB is it possible that your work could solve this issue of mine? It happened just after the upgrade to WP5 and WP-dev-server4

It could! This will go out during continuous deployment and you'll be notified.

cypress · 2021-08-27T20:32:33Z

Test summary

13000 • 0 • 159 • 5 • 4

Run details


Project	cypress
Status	Passed
Commit	`f26f555`
Started	Aug 30, 2021 8:37 PM
Ended	Aug 30, 2021 8:47 PM
Duration	10:39 💡
OS	Linux Debian - 10.9
Browser	Multiple

View run in Cypress Dashboard ➡️

Flakiness

	cypress/proxy-logging-spec.ts	1
1	Proxy Logging > request logging > fetch log shows resource type, url, method, and status code and has expected snapshots and consoleProps
	commands/xhr_spec.js	2
1	... > no status when request isnt forced 404
2	src/cy/commands/xhr > abort > aborts xhrs currently in flight
	commands/net_stubbing_spec.ts	1
1	network stubbing > intercepting request > can intercept utf-8 request bodies without crashing

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

JessicaSachs · 2021-08-27T20:32:40Z

To debug the specific "webpack overlay" compilation issues, you should check out the following steps that we discussed:

Steps to debug a particular usage of webpack dev server:
1. Open a "user project' (AKA the one that failed in CI) and run cypress:open
2. Open cypress/plugins/index.js (or wherever on('dev-server:start') is called)
3. Go to npm/react OR npm/webpack-dev-server depending on what's used in dev-server:start
4. Watch (if you have to) the npm/react or npm/webpack-dev-server plugin and when you modify it, bounce the server
5. The "user project" should pass

giampaolo44 · 2021-08-27T21:36:22Z

@ZachJW34 @BBB is it possible that your work could solve this issue of mine? It happened just after the upgrade to WP5 and WP-dev-server4

It could! This will go out during continuous deployment and you'll be notified.

Thank you @JessicaSachs!

lmiller1990

Just some small comments

lmiller1990 · 2021-08-30T04:46:22Z

npm/webpack-dev-server/test-wds-3.js

+    process.exit(exitCode)
+  }
+
+  pkg.devDependencies['webpack-dev-server'] = '^3.11.0'


Hm, should we specify the exact version during CI runs to ensure the tests always us the same one? eg 3.11.0 (no ^)

Makes sense I'll pin it.

lmiller1990 · 2021-08-30T04:46:59Z

packages/desktop-gui/src/runs/runs-list-empty.jsx

@@ -47,7 +47,7 @@ class RunsListEmpty extends Component {
      url: 'https://on.cypress.io/ci',
      params: {
        utm_medium,
-        utm_campaign: 'Run Guide',
+        utm_campaign: 'CI',


Was this file changed intentionally?

@JessicaSachs recommended that I pull latest develop into this branch since there were certain tests failing on master. These changes are from fa4b9d7 which fixes some of those tests.

Talked with @JessicaSachs and reverted the merge from develop!

ShashankHegde16 · 2021-09-04T14:25:43Z

It is still hanging for me with next js typescript. When i run yarn cypress open-ct the test runner hangs indefinitly.

lmiller1990 · 2021-09-06T00:31:11Z

@ShashankHegde16 can you please share a repository with a minimal reproduction?

ShashankHegde16 · 2021-09-16T14:44:38Z

cypress.json - {
"baseUrl": "http://localhost:3000",
"integrationFolder": "cypress/tests",
"component": {
"componentFolder": "src/modules",
"testFiles": "tests/*.spec.{ts,tsx}",
"viewportHeight": 500,
"viewportWidth": 700
},

"projectId": "512hep"
}

The component test hangs forever.

ShashankHegde16 · 2021-09-16T15:00:34Z

Also there is an error when i run ct

ZachJW34 · 2021-09-17T17:03:47Z

@ShashankHegde16 Your error seems to be related to the newest version of Next #17992. Is your problem solved if you pin your version of Next to "next": "11.1.0"?

ShashankHegde16 · 2021-09-19T19:12:37Z

@ShashankHegde16 Your error seems to be related to the newest version of Next #17992. Is your problem solved if you pin your version of Next to "next": "11.1.0"?

Pinning it worked. Thanks

ShashankHegde16 · 2021-09-19T19:34:25Z

But im getting this error as no tests file found

lmiller1990 · 2021-09-20T00:43:16Z

Recreating a bug from screenshots of package.json is difficult. Can you provide a repo @ShashankHegde16? Thanks!

BBB and others added 3 commits August 27, 2021 11:05

feat: migrate to new webpack-dev-server public api

51d780b

fix: extract version check, and disallow minor releases matching `/3\…

1389d15

…./` with a starts with req.

feat: support webpack-dev-server v4

f2c37ae

ZachJW34 requested review from lmiller1990 and JessicaSachs August 27, 2021 16:40

ZachJW34 changed the title ~~feat: migrate to new webpack-dev-server public api~~ feat: support webpack-dev-server v4 Aug 27, 2021

ZachJW34 commented Aug 27, 2021

View reviewed changes

fix webpack warning causing overlay and types

edcbce0

ZachJW34 requested a review from a team as a code owner August 27, 2021 21:55

ZachJW34 requested review from jennifer-shehane and kuceb and removed request for a team August 27, 2021 21:55

jennifer-shehane removed request for jennifer-shehane and kuceb August 27, 2021 22:18

lmiller1990 reviewed Aug 30, 2021

View reviewed changes

ZachJW34 added 2 commits August 30, 2021 14:25

pin test dependency

2ccfeaa

fix tests that were using incorrect wewbpack configuration

f26f555

ZachJW34 force-pushed the issue-17869-support-wds-4 branch from 9a30e0a to f26f555 Compare August 30, 2021 20:19

JessicaSachs approved these changes Aug 30, 2021

View reviewed changes

JessicaSachs merged commit 16e4759 into master Aug 30, 2021

cypress-bot bot mentioned this pull request Aug 30, 2021

Component Tests hang indefinitely when using [email protected] #17846

Closed

lmiller1990 mentioned this pull request Aug 31, 2021

chore(webpack-dev-server): change ts-expect-error to ts-ignore directive #17939

Closed

5 tasks

francisu mentioned this pull request Sep 8, 2021

Extreme slowness when using webpack-dev-server > 4.0.0 with cypress open-ct 8.3.1 #18029

Closed

lmiller1990 mentioned this pull request Sep 15, 2021

feat: Webpack dev server v4 #17869

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: support webpack-dev-server v4 #17918

feat: support webpack-dev-server v4 #17918

ZachJW34 commented Aug 27, 2021 •

edited

Loading

cypress-bot bot commented Aug 27, 2021

CLAassistant commented Aug 27, 2021 •

edited

Loading

giampaolo44 commented Aug 27, 2021

ZachJW34 Aug 27, 2021

JessicaSachs commented Aug 27, 2021 •

edited

Loading

JessicaSachs commented Aug 27, 2021

cypress bot commented Aug 27, 2021 •

edited

Loading

JessicaSachs commented Aug 27, 2021

giampaolo44 commented Aug 27, 2021

lmiller1990 left a comment

lmiller1990 Aug 30, 2021

ZachJW34 Aug 30, 2021

lmiller1990 Aug 30, 2021

ZachJW34 Aug 30, 2021

ZachJW34 Aug 30, 2021

ShashankHegde16 commented Sep 4, 2021

lmiller1990 commented Sep 6, 2021

ShashankHegde16 commented Sep 16, 2021 •

edited

Loading

ShashankHegde16 commented Sep 16, 2021

ZachJW34 commented Sep 17, 2021

ShashankHegde16 commented Sep 19, 2021 •

edited

Loading

ShashankHegde16 commented Sep 19, 2021

lmiller1990 commented Sep 20, 2021

feat: support webpack-dev-server v4 #17918

feat: support webpack-dev-server v4 #17918

Conversation

ZachJW34 commented Aug 27, 2021 • edited Loading

User facing changelog

Additional details

How to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Aug 27, 2021

CLAassistant commented Aug 27, 2021 • edited Loading

giampaolo44 commented Aug 27, 2021

ZachJW34 Aug 27, 2021

Choose a reason for hiding this comment

JessicaSachs commented Aug 27, 2021 • edited Loading

JessicaSachs commented Aug 27, 2021

cypress bot commented Aug 27, 2021 • edited Loading

Test summary

Run details

Flakiness

JessicaSachs commented Aug 27, 2021

giampaolo44 commented Aug 27, 2021

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Aug 30, 2021

Choose a reason for hiding this comment

ZachJW34 Aug 30, 2021

Choose a reason for hiding this comment

lmiller1990 Aug 30, 2021

Choose a reason for hiding this comment

ZachJW34 Aug 30, 2021

Choose a reason for hiding this comment

ZachJW34 Aug 30, 2021

Choose a reason for hiding this comment

ShashankHegde16 commented Sep 4, 2021

lmiller1990 commented Sep 6, 2021

ShashankHegde16 commented Sep 16, 2021 • edited Loading

ShashankHegde16 commented Sep 16, 2021

ZachJW34 commented Sep 17, 2021

ShashankHegde16 commented Sep 19, 2021 • edited Loading

ShashankHegde16 commented Sep 19, 2021

lmiller1990 commented Sep 20, 2021

ZachJW34 commented Aug 27, 2021 •

edited

Loading

CLAassistant commented Aug 27, 2021 •

edited

Loading

JessicaSachs commented Aug 27, 2021 •

edited

Loading

cypress bot commented Aug 27, 2021 •

edited

Loading

ShashankHegde16 commented Sep 16, 2021 •

edited

Loading

ShashankHegde16 commented Sep 19, 2021 •

edited

Loading