feat(npm/webpack-preprocessor): release npm/webpack-preprocessor 4.8.0 #16504

lmiller1990 · 2021-05-13T16:03:30Z

New minor version release.Eexperimental-ish Webpack 5 support (well, not experimental. It works, but users need to polyfill node APIs).

I cherry-picked the commit from the branch that was merged into develop.

…ck 4 (#16493) * feat: support webpack 5 alongside webpack 5 * revert code

cypress-bot · 2021-05-13T16:03:32Z

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 · 2021-05-13T16:18:12Z

Test summary

13841 • 0 • 164 • 5 • 0

Run details


Project	cypress
Status	Passed
Commit	`a6371fb`
Started	May 13, 2021 9:42 PM
Ended	May 13, 2021 9:56 PM
Duration	13:46 💡
OS	Linux Debian - 10.8
Browser	Multiple

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

ntucker · 2021-05-13T19:17:45Z

Eagerly awaiting this release!

lmiller1990 · 2021-05-13T23:38:36Z

@ntucker this will be live in a few hours (waiting semantic release to run on CI right now).

If you are using webpack 5, you will still need to deal with the various deprecations, summaized here, mainly around no nodejs module polyfills.

Once the release is done, please give this a try and let me know if you have any problems still - it was difficult to fully test since all the big apps I have (Cypress monorepo, personal ones) are non trivial to migrate to webpack 5. It worked fine on the small apps I tested with, though.

ntucker · 2021-05-13T23:46:37Z

I'm using it with a custom webpack config (that handles things like node polyfills, among others) but still getting invalid config object with a temp package release.

lmiller1990 · 2021-05-14T00:07:06Z

Can you please share a reproduction (or if you can't, your webpack config)? It worked for the examples we have.

Alternatively, you could join our discord and we can talk in real time, or pair. I really want to get webpack 5 stable.

ntucker · 2021-05-14T21:48:05Z

I'm getting

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration should be an object:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.

What version of the CLI is expected?

Using https://github.com/ntucker/anansi/tree/master/packages/webpack-config-anansi mostly for the config.

(you can setup a project quickly with npm install -g yarn @anansi/cli; anansi hatch testproject)

Joined the discord, but didn't find the same username there. Mine is the same there.

ntucker · 2021-05-14T21:49:07Z

https://github.com/cypress-io/cypress/blob/master/npm/webpack-preprocessor/package.json still has webpack 4 as peerdep - is this right?

ntucker · 2021-05-14T23:08:51Z

I can find debug statements like https://github.com/cypress-io/cypress/blob/master/npm/webpack-preprocessor/index.ts#L220 but how do I activate them? The cli doesn't seem to have an option to enable debug logging

ntucker · 2021-05-14T23:20:23Z

@lmiller1990 I just edited the node_modules paths directtly. Turns out we're using the function form of webpack config https://webpack.js.org/configuration/configuration-types/#exporting-a-function

ntucker · 2021-05-15T00:44:56Z


  0 passing (324ms)
  1 failing

  1) An uncaught error was detected outside of a test:
     ReferenceError: The following error originated from your test code, not from Cypress.

  > process is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.
      at Object../node_modules/variable-diff/node_modules/supports-color/index.js (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53491:12)
      at __webpack_require__ (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53660:42)
      at Object../node_modules/variable-diff/node_modules/chalk/index.js (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53351:21)
      at __webpack_require__ (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53660:42)
      at Object../node_modules/variable-diff/index.js (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53114:13)
      at __webpack_require__ (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53660:42)
      at Object../node_modules/snap-shot-compare/src/index.js (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:42534:14)
      at __webpack_require__ (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53660:42)
      at Object../node_modules/@cypress/snapshot/src/index.js (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:18:17)
      at __webpack_require__ (https://localhost:6080/__cypress/tests?p=cypress/support/index.js:53660:42)

I have defineplugin...how do i track down there this is?

ntucker · 2021-05-23T04:50:29Z

@lmiller1990 so are there plans to not use node-only modules, or release a webpack 5 plugin that makes process work? Got no response in the discord either.

ntucker · 2021-05-23T04:51:19Z

For others following along: this is how webpack 4 polyfilled node's process variable: https://v4.webpack.js.org/configuration/node/

This is no longer covered.

ntucker · 2021-05-23T04:53:06Z

How to test webpack 5 base compatibility: https://webpack.js.org/migrate/5/#test-webpack-5-compatibility

ntucker · 2021-05-28T22:52:19Z

Is there an alternative to @cypress/snapshot that works with webpack5?

lmiller1990 · 2021-05-31T00:28:15Z

@ntucker I have not tested @cypress/snapshot with webpack 5, but I can look into this. What is happening when you try using it?

For webpack 5, I tested it out in a (very simple) project and it worked for me: https://github.com/lmiller1990/cypress-react-webpack-5-example. I can't say for a more complex configuration, but if you have one you can share, happy to take a look and the necessary changes to Cypress to fully support webpack 5.

ntucker · 2021-05-31T14:12:32Z

Process is not defined in variable-diff package. I pasted the stack trace above

ntucker · 2021-05-31T19:55:00Z

@cypress/snapshot relies on snap-shot-compare relies on variable-diff relies on chalk, which is a node-only tool. Replace chalk or have solution to fake its liberal use of process. Is there a way to disable snap-shot-compare in cypress/snapshot? Your example may reproduce if you trigger that piece

ntucker · 2021-05-31T19:56:33Z

@lmiller1990 if you don't trigger a codepath that does something interesting at all of course you won't trigger the chalk code to run and thus not get the problem

ntucker · 2021-05-31T20:09:10Z

@lmiller1990 you need @cypress/snapshot to repro

lmiller1990 · 2021-06-02T00:27:44Z

Right, I understand.

Short term: use a polyfill like described here. That would be node-polyfill-webpack-plugin. It's likely many other packages will suffer from this problem.

I'm not sure how we should best approach this long term. The offending line is ultimately here in the variable-diff package. It's unlikely to change. We could update snap-shot-it to not use variable-diff but another library that is runtime agnostic. I created an issue in snap-shot-compare to raise visibility and track this.

ntucker · 2021-06-02T00:36:42Z

@lmiller1990 Ah yes, thanks! I was looking for a plugin like that and for some reason couldn't find it - so much appreciated there. Also thanks for bringing up the issue with the dependency. 👍

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

91e5711

…ck 4 (#16493) * feat: support webpack 5 alongside webpack 5 * revert code

lmiller1990 requested review from agg23, JessicaSachs and elevatebart May 13, 2021 16:03

agg23 approved these changes May 13, 2021

View reviewed changes

Merge branch 'master' into release-webpack-minor

a6371fb

lmiller1990 merged commit c9fb982 into master May 13, 2021

lmiller1990 mentioned this pull request Jun 2, 2021

Consider runtime agnostic alternative to variable-diff bahmutov/snap-shot-compare#100

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(npm/webpack-preprocessor): release npm/webpack-preprocessor 4.8.0 #16504

feat(npm/webpack-preprocessor): release npm/webpack-preprocessor 4.8.0 #16504

lmiller1990 commented May 13, 2021

cypress-bot bot commented May 13, 2021

cypress bot commented May 13, 2021 •

edited

ntucker commented May 13, 2021

lmiller1990 commented May 13, 2021 •

edited

ntucker commented May 13, 2021 •

edited

lmiller1990 commented May 14, 2021 •

edited

ntucker commented May 14, 2021 •

edited

ntucker commented May 14, 2021

ntucker commented May 14, 2021

ntucker commented May 14, 2021

ntucker commented May 15, 2021 •

edited

ntucker commented May 23, 2021

ntucker commented May 23, 2021

ntucker commented May 23, 2021

ntucker commented May 28, 2021

lmiller1990 commented May 31, 2021

ntucker commented May 31, 2021

ntucker commented May 31, 2021 •

edited

ntucker commented May 31, 2021

ntucker commented May 31, 2021 •

edited

lmiller1990 commented Jun 2, 2021

ntucker commented Jun 2, 2021

feat(npm/webpack-preprocessor): release npm/webpack-preprocessor 4.8.0 #16504

feat(npm/webpack-preprocessor): release npm/webpack-preprocessor 4.8.0 #16504

Conversation

lmiller1990 commented May 13, 2021

cypress-bot bot commented May 13, 2021

cypress bot commented May 13, 2021 • edited

Test summary

Run details

ntucker commented May 13, 2021

lmiller1990 commented May 13, 2021 • edited

ntucker commented May 13, 2021 • edited

lmiller1990 commented May 14, 2021 • edited

ntucker commented May 14, 2021 • edited

ntucker commented May 14, 2021

ntucker commented May 14, 2021

ntucker commented May 14, 2021

ntucker commented May 15, 2021 • edited

ntucker commented May 23, 2021

ntucker commented May 23, 2021

ntucker commented May 23, 2021

ntucker commented May 28, 2021

lmiller1990 commented May 31, 2021

ntucker commented May 31, 2021

ntucker commented May 31, 2021 • edited

ntucker commented May 31, 2021

ntucker commented May 31, 2021 • edited

lmiller1990 commented Jun 2, 2021

ntucker commented Jun 2, 2021

cypress bot commented May 13, 2021 •

edited

lmiller1990 commented May 13, 2021 •

edited

ntucker commented May 13, 2021 •

edited

lmiller1990 commented May 14, 2021 •

edited

ntucker commented May 14, 2021 •

edited

ntucker commented May 15, 2021 •

edited

ntucker commented May 31, 2021 •

edited

ntucker commented May 31, 2021 •

edited