Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(webpack-dev-server): remove hard dependency on html-webpack-plugin v4 #16108

Merged
merged 18 commits into from
Apr 23, 2021

Conversation

lmiller1990
Copy link
Contributor

@lmiller1990 lmiller1990 commented Apr 21, 2021

User facing changelog

Remove html-webpack-plugin@4 as a direct dependency for @cypress/webpack-dev-server.

Additional details

Making html-webpack-plugin a peerDependency, and allows versions 4 and 5. This means the user must install either html-webpack-plugin@4 and webpack@4 or html-webpack-plugin@5 and webpack@5.

I also removed some types that conflicted between webpack 4 and 5.

I added a nextjs webpack 5 example but cannot get it to run on CI. I tested manually. We have to specify a set version for webpack and html-plugin-webpack in @cypress/webpack-dev-server under devDependencies. What would be ideal is some way to conditionally change this depending on the which example project is running, but I couldn't find a good solution. I even tried cp examples/nextjs-webpack-5/node_modules/{webpack,html-plugin-webpack} ../../../webpack-dev-server/node_modules, but this messed things up royally on CI and is a hack.

I think ideally the examples projects should somehow install @cypress/webpack-dev-server into their own node_modules directory instead of relying on traversing up to the local version. This would solve a lot of problems and make the test more "real world".

For now I just left the nextjs example there with the goal of finding a good way to run it on CI in the future.

Nextjs specifically introduces complexity because they inline their webpack version - it's not installed in node_modules, but compied and shipped as part of their next/server package.

How has the user experience changed?

You can bring your own webpack and html-webpack-plugin version. Must be 4 or 5.

  • webpack@4 => html-webpack-plugin@4
  • webpack@5 => html-webpack-plugin@5

Perhaps we can update the Cypress wizard in the future to account for next.config.js, where webpack5: true can be configured.

PR Tasks

  • Have tests been added/updated?
  • Docs we should update them to include the required peer dependencies

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Apr 21, 2021

Thanks for taking the time to open a PR!

@cypress
Copy link

cypress bot commented Apr 21, 2021



Test summary

4024 0 49 2Flakiness 0


Run details

Project cypress
Status Passed
Commit 3a26f17
Started Apr 23, 2021 3:17 AM
Ended Apr 23, 2021 3:28 AM
Duration 10:20 💡
OS Linux Debian - 10.8
Browser Chrome 89

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

@lmiller1990 lmiller1990 marked this pull request as ready for review April 21, 2021 14:36
@lmiller1990 lmiller1990 requested a review from a team as a code owner April 22, 2021 07:10
@lmiller1990 lmiller1990 requested review from chrisbreiding and kuceb and removed request for a team April 22, 2021 07:10
Copy link
Contributor

@elevatebart elevatebart left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought we had it this way because we wanted to impose our HTML plugin since we provide the HTML file. If it works, I am fine with it.

@@ -92,7 +92,7 @@
"@types/glob": "7.1.1",
"@types/lodash": "4.14.168",
"@types/markdown-it": "0.0.9",
"@types/mini-css-extract-plugin": "0.8.0",
"@types/mini-css-extract-plugin": "1.4.2",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why isn't this 1.5.0 like the one is web-config?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latest types available are 1.4.2. 1.5.0 does not have types available.

@lmiller1990
Copy link
Contributor Author

@elevatebart we did, but then I realized this won't work for webpack 5 users. So we need to support a range of html-webpack-plugin that corresponds to the range of webpack version we support (4.x and 5.x).

@lmiller1990 lmiller1990 merged commit 4cfe4b1 into develop Apr 23, 2021
tgriesser added a commit that referenced this pull request Apr 26, 2021
* develop: (49 commits)
  fix: `cy.type()` should not change the value attr of button-like inputs. (#16154)
  fix: properly detect `cy.intercept(url, routeMatcher, handler)` overload (#16167)
  fix: consider multiple routes when looking for aliases (#16180)
  fix: pass contextIsolation: true (#16165)
  chore: fix failing "should handle aborted requests" test (#16170)
  feat(issue-3741): added keyboard support for folder (#15648)
  fix(webpack-dev-server): remove hard dependency on html-webpack-plugin v4  (#16108)
  chore(deps): downgrade electron to v12.0.0-beta.14 (#16113)
  fix: accept absolute paths in vite dev server (#16148)
  fix: cy.then shows wrong type when collection of HTMLElement's is provided (#15869)
  fix: do not treat utf8 requests as binary (#15946)
  chore: fix types
  docs: fix broken links for @cypress/react example recipes (#15674)
  update circle yml
  ignore undefined beforeEach
  fix: make vite-dev-server work on windows (#16103)
  chore: add triple slash reference
  chore: remove conflicting types
  chore: rebuild yarn lock
  resolve conflicts in master(fe0b63c) and develop
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[7.0.1] Component testing not working with Next.js and future.webpack5 configuration
3 participants