feat(webpack-preprocessor): Allow to pass custom webpack output #14599

vtereshyn · 2021-01-16T09:57:24Z

Closes Mount Component that uses React.lazy throws webpack error #14592

User facing changelog

The user who uses @cypress/webpack-preprocessor has the ability to set his/her own Webpack publicPath

Additional details

Please, see #14592 for additional explanation.

How has the user experience changed?

Before:

After:

PR Tasks

[+] Have tests been added/updated?

cypress-bot · 2021-01-16T09:57:28Z

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-01-16T09:57:30Z

All committers have signed the CLA.

vtereshyn · 2021-01-18T17:04:52Z

Not sure who I have to tag in here, hope that @bahmutov will be the right person to address this.

dmtrKovalenko

I am not sure it will work with lazy-loaded modules (cypress has some limitations here – only allows to host 1 javascript file per spec). There is a test https://github.com/cypress-io/cypress/blob/develop/npm/react/cypress/component/advanced/lazy-loaded-suspense/lazy-loaded-suspense.spec.tsx that can check the desired behavior.

Can you please uncomment it and make sure that CI passed? If it passed – that would be awesome :)
Thank you

vtereshyn · 2021-01-19T08:54:41Z

@dmtrKovalenko I am pretty sure it will work with Lazy loaded components as I showed in my screenshots.

Here is my usage: I have a component that wrapped into HOC which lazy loads another component (popup) and I got a Webpack error, not React or Cypress.

Right now as a fix I'm editing node_modules/@cypress/ folder to proceed with my work.

Also, sorry, I didn't get what particularly should I uncomment? I see that the code you mentioned is uncommented.

dmtrKovalenko · 2021-01-19T08:55:44Z

Cool if so, sorry just remove the .skip on test and the coment

vtereshyn · 2021-01-19T08:59:42Z

@dmtrKovalenko ok, will do. But my fix is not about that at all. My fix is particularly about webpack-preprocessor and webpack error, not about Cypress and React.Lazy. I didn't change any code in Cypress core

dmtrKovalenko · 2021-01-19T09:01:04Z

I understand this, but PR title says that React.lazy breaks the webpack-preprocessor code, right? @cypress/react is using webpack-preprocessor now so we can check that PR works just fine?

Or did I miss something?

dmtrKovalenko · 2021-01-19T09:03:38Z

npm/webpack-preprocessor/test/unit/index.spec.js

@@ -151,6 +151,20 @@ describe('webpack preprocessor', function () {
        })
      })

+      it('adds output options when user output options are non-default', function () {


This test doesn't really check that when we have dynamic import somewhere that webpack doesn't crash. It only checks that specific options passed to webpack config.
What do you think about adding more complex test that shows the desired behavior if @cypress/react tests won't work?

vtereshyn · 2021-01-19T09:08:09Z

Probably this is incorrect to name PR as I named it here. I named it React lazy loads breaks webpack config just because I faced this error during Lazy loading in one of my components. This PR should be named like Allow Cypress user to pass own Webpack output configuration. Basically, this fix is about dynamic loading as well, just because Webpack doesn't understand the path inside the code.
Ex:
const Component = import('../../../${YourComponentName}'

Please note, this is just "pseudo code"

dmtrKovalenko · 2021-01-19T09:17:06Z

Cool, thx its more clear now. Then it should be not fix: but feat: as well

vtereshyn · 2021-01-19T09:18:16Z

Cool, thx its more clear now. Then it should be not fix: but feat: as well

Agreed, do you want me to create new PR with using new branch?

dmtrKovalenko · 2021-01-19T09:19:21Z

I think just rename the title

vtereshyn · 2021-01-19T09:20:15Z

@dmtrKovalenko sounds good, thanks

vtereshyn · 2021-01-19T09:28:03Z

@dmtrKovalenko ok, so do you want me to do something else? Write Cypress tests?

dmtrKovalenko · 2021-01-19T09:42:04Z

It may be nice to add e2e tests in webpack-preprocessor that shows how it works, but maybe that is not needed. :)
Probably let's wait for CI to pass

vtereshyn · 2021-01-19T09:43:32Z

Ok, thanks! I see some weird behavior with some checks, that related to code I haven't touched. Not sure why it happened.

vtereshyn · 2021-01-20T13:38:51Z

Hey @dmtrKovalenko
I'm sorry, but I can't get what's going on CI because I have executed test script locally and everything was good. Not sure what should I do next and how can I reproduce CI issue but locally. Thanks!

dmtrKovalenko · 2021-01-20T13:40:40Z

@vtereshyn this error is coming from npm/react package mostly.
Just do the cd npm/react && yarn cy:open

vtereshyn · 2021-01-20T14:02:21Z

vtereshyn · 2021-01-20T14:10:25Z

I am not sure whats wrong on CI then

vtereshyn · 2021-01-20T15:12:17Z

@dmtrKovalenko any thoughts?

vtereshyn · 2021-01-21T14:27:46Z

well, I am not getting any responses, so I'm gonna close this PR. @dmtrKovalenko @jennifer-shehane

dmtrKovalenko · 2021-01-21T14:28:42Z

Do not close it, I'll take a look once get some free time

lmiller1990 · 2021-01-21T22:21:37Z

@vtereshyn when you run the tests locally you may need to build npm/webpack-preprocessor manually - either run yarn watch in npm/webpack-preprocessor or just with yarn build. That might explain why things work locally (you ran the tests without your change) but CI builds everything prior to running the tests.

vtereshyn · 2021-01-22T08:14:23Z

@lmiller1990 thanks for your suggestion. I did yarn build before running tests. And looks like I got all test passed locally again.

…config fix: webpack-preprocessor-lazy-load - React lazy load breaks webpack config

lmiller1990 · 2021-01-22T10:22:21Z

Will take a look!

lmiller1990 · 2021-01-25T00:46:07Z

I ran the tests locally and reproduced the error once. But then I ran them again and it all seemed fine. I'll try re-running CI and see what happens.

vtereshyn · 2021-01-26T12:28:17Z

@lmiller1990 thank you

jennifer-shehane requested a review from a team January 19, 2021 05:14

dmtrKovalenko suggested changes Jan 19, 2021

View reviewed changes

dmtrKovalenko reviewed Jan 19, 2021

View reviewed changes

dmtrKovalenko changed the title ~~fix: webpack-preprocessor-lazy-load - React lazy load breaks webpack config~~ feat(webpack-preprocessor): Allow to pass custom webpack output Jan 19, 2021

vtereshyn force-pushed the fix/webpack-preprocessor-lazy-load branch from f03fb78 to 685f11e Compare January 20, 2021 13:54

vtereshyn requested a review from dmtrKovalenko January 20, 2021 15:23

fix: webpack-preprocessor-lazy-load - React lazy load breaks webpack …

f09cd75

…config fix: webpack-preprocessor-lazy-load - React lazy load breaks webpack config

vtereshyn force-pushed the fix/webpack-preprocessor-lazy-load branch from 685f11e to f09cd75 Compare January 22, 2021 08:15

Merge branch 'develop' into fix/webpack-preprocessor-lazy-load

a6969ad

vtereshyn added 2 commits January 27, 2021 14:31

Merge branch 'develop' into fix/webpack-preprocessor-lazy-load

702a178

Merge branch 'develop' into fix/webpack-preprocessor-lazy-load

37533b0

vtereshyn closed this Feb 12, 2021

vtereshyn deleted the fix/webpack-preprocessor-lazy-load branch February 12, 2021 12:54

am-a mentioned this pull request Jun 23, 2021

Webpack 5 support #8900

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(webpack-preprocessor): Allow to pass custom webpack output #14599

feat(webpack-preprocessor): Allow to pass custom webpack output #14599

vtereshyn commented Jan 16, 2021 •

edited

Loading

cypress-bot bot commented Jan 16, 2021

CLAassistant commented Jan 16, 2021 •

edited

Loading

vtereshyn commented Jan 18, 2021

dmtrKovalenko left a comment •

edited

Loading

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021 •

edited

Loading

dmtrKovalenko Jan 19, 2021

vtereshyn commented Jan 19, 2021 •

edited

Loading

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021 •

edited

Loading

vtereshyn commented Jan 20, 2021

dmtrKovalenko commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 21, 2021

dmtrKovalenko commented Jan 21, 2021

lmiller1990 commented Jan 21, 2021

vtereshyn commented Jan 22, 2021

lmiller1990 commented Jan 22, 2021

lmiller1990 commented Jan 25, 2021

vtereshyn commented Jan 26, 2021

feat(webpack-preprocessor): Allow to pass custom webpack output #14599

feat(webpack-preprocessor): Allow to pass custom webpack output #14599

Conversation

vtereshyn commented Jan 16, 2021 • edited Loading

User facing changelog

Additional details

How has the user experience changed?

PR Tasks

cypress-bot bot commented Jan 16, 2021

CLAassistant commented Jan 16, 2021 • edited Loading

vtereshyn commented Jan 18, 2021

dmtrKovalenko left a comment • edited Loading

Choose a reason for hiding this comment

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021 • edited Loading

dmtrKovalenko Jan 19, 2021

Choose a reason for hiding this comment

vtereshyn commented Jan 19, 2021 • edited Loading

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

vtereshyn commented Jan 19, 2021

dmtrKovalenko commented Jan 19, 2021

vtereshyn commented Jan 19, 2021 • edited Loading

vtereshyn commented Jan 20, 2021

dmtrKovalenko commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 20, 2021

vtereshyn commented Jan 21, 2021

dmtrKovalenko commented Jan 21, 2021

lmiller1990 commented Jan 21, 2021

vtereshyn commented Jan 22, 2021

lmiller1990 commented Jan 22, 2021

lmiller1990 commented Jan 25, 2021

vtereshyn commented Jan 26, 2021

vtereshyn commented Jan 16, 2021 •

edited

Loading

CLAassistant commented Jan 16, 2021 •

edited

Loading

dmtrKovalenko left a comment •

edited

Loading

dmtrKovalenko commented Jan 19, 2021 •

edited

Loading

vtereshyn commented Jan 19, 2021 •

edited

Loading

vtereshyn commented Jan 19, 2021 •

edited

Loading