fix: allow next.js apps to import global styles #22769

ZachJW34 · 2022-07-13T17:22:59Z

Closes Cypress 10 | SASS Global Style File Imports Within Next.js - Unable To Run Cypress Component Test #22525

User facing changelog

Allow Next.js apps to import global styles

Additional details

Next.js restricts the imports of global css/scss files to the top-level <App /> component. The Webpack configuration for these rules can be found here. This PR removes the limitations that Next applies to global styles, allowing their import in the support file.

Steps to test

I tweaked the next project fixture to include global style imports. If you remove the call to allowGlobalStylesImports and rebuild the @cypress/webpack-dev-server package, the npm/webpack-dev-server/cypress/e2e/next.cy.ts system tests will fail.

How has the user experience changed?

PR Tasks

Have tests been added/updated?
Has the original issue (or this PR, if no issue exists) been tagged with a release in ZenHub? (user-facing changes only)
[na] Has a PR for user-facing changes been opened in cypress-documentation?
[na] Have API changes been updated in the type definitions?

cypress-bot · 2022-07-13T17:23:01Z

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 · 2022-07-13T17:40:05Z

Test summary

4377 • 0 • 51 • 0 • 1

Run details


Project	cypress
Status	Passed
Commit	`c53e0ab`
Started	Jul 21, 2022 7:26 PM
Ended	Jul 21, 2022 7:37 PM
Duration	11:25 💡
OS	Linux Debian - 10.11
Browser	Firefox 98

View run in Cypress Dashboard ➡️

Flakiness

	cypress/e2e/commands/actions/click.cy.js		1
1	... > scroll-behavior > can scroll to and click elements in html with scroll-behavior: smooth

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

One comment!

lmiller1990 · 2022-07-14T03:44:51Z

system-tests/project-fixtures/next/cypress/support/component.ts

@@ -1 +1,4 @@
-//
+// Importing global styles fails with Next.js due to restrictions on style imports.


Do we want to add some kind of assertion that the global style is actually applied to some element?

Added an assertion here: b0e8bf0

Sayvai · 2022-07-14T08:11:35Z

@ZachJW34 - I tried to install the binary (to test your changes) built by Circle CI from this PR via the provided command:

npm install https://cdn.cypress.io/beta/npm/10.3.1/linux-x64/zachw/issue-22525-a049ed7f3a2f9a709e466f60bf2da775312af521/cypress.tgz

But the install failed to install on my local nextjs-playground project with a 404 (not found) response. Click to expand the following error output below:

NPM install Cypress error output

$ npm install https://cdn.cypress.io/beta/npm/10.3.1/linux-x64/zachw/issue-22525-a049ed7f3a2f9a709e466f60bf2da775312af521/cypress.tgz

npm ERR! code 1
npm ERR! path /Users/sayvai/repos/Sayvai/nextjs-playground/node_modules/cypress
npm ERR! command failed
npm ERR! command sh -c node index.js --exec install
npm ERR! ⚠ Warning: You are installing a pre-release build of Cypress.
npm ERR! 
npm ERR! Bugs may be present which do not exist in production builds.
npm ERR! 
npm ERR! This build was created from:
npm ERR!   * Commit SHA: a049ed7f3a2f9a709e466f60bf2da775312af521
npm ERR!   * Commit Branch: zachw/issue-22525
npm ERR!   * Commit Timestamp: 2022-07-13T19:10:51.000Z
npm ERR! 
npm ERR! Installing Cypress (version: https://cdn.cypress.io/beta/binary/10.3.1/darwin-x64/zachw/issue-22525-a049ed7f3a2f9a709e466f60bf2da775312af521/cypress.zip)
npm ERR! 
npm ERR! [STARTED] Task without title.
npm ERR! The Cypress App could not be downloaded.
npm ERR! 
npm ERR! Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR! 
npm ERR! Otherwise, please check network connectivity and try again:
npm ERR! 
npm ERR! ----------
npm ERR! 
npm ERR! URL: https://cdn.cypress.io/beta/binary/10.3.1/darwin-x64/zachw/issue-22525-a049ed7f3a2f9a709e466f60bf2da775312af521/cypress.zip
npm ERR! Error: Failed downloading the Cypress binary.
npm ERR! Response code: 404
npm ERR! Response message: Not Found
npm ERR! 
npm ERR! ----------
npm ERR! 
npm ERR! Platform: darwin-x64 (21.5.0)
npm ERR! Cypress Version: 10.3.1
npm ERR! [FAILED] The Cypress App could not be downloaded.
npm ERR! [FAILED] 
npm ERR! [FAILED] Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR! [FAILED] 
npm ERR! [FAILED] Otherwise, please check network connectivity and try again:
npm ERR! [FAILED] 
npm ERR! [FAILED] ----------
npm ERR! [FAILED] 
npm ERR! [FAILED] URL: https://cdn.cypress.io/beta/binary/10.3.1/darwin-x64/zachw/issue-22525-a049ed7f3a2f9a709e466f60bf2da775312af521/cypress.zip
npm ERR! [FAILED] Error: Failed downloading the Cypress binary.
npm ERR! [FAILED] Response code: 404
npm ERR! [FAILED] Response message: Not Found
npm ERR! [FAILED] 
npm ERR! [FAILED] ----------
npm ERR! [FAILED] 
npm ERR! [FAILED] Platform: darwin-x64 (21.5.0)
npm ERR! [FAILED] Cypress Version: 10.3.1

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/sayvai/.npm/_logs/2022-07-14T07_58_33_424Z-debug-0.log

Also, when i looked further into the CI Circle workflow build pipeline for the Build the Cypress binary job, although it may have appeared successful, the underlying console output appears to error out on the final build step.

I noticed some workflow checks on this PR failed, and so not sure whether those failed checks relates to the build failure? 🤔

ZachJW34 · 2022-07-14T17:54:37Z

@Sayvai Not sure why the binary isn't loading. I've pushed another commit and will see if I can figure out what's wrong when the new binary is published. The logs at the end of the binary build job are misleading. CI runs the binary against a test that is expected to fail so it prints some expected error messages

lmiller1990

I did not test on my machine yet but my comments are addressed, so going to approve. I can give it a try as well.

Sayvai · 2022-07-15T08:39:48Z

@Sayvai Not sure why the binary isn't loading. I've pushed another commit and will see if I can figure out what's wrong when the new binary is published. The logs at the end of the binary build job are misleading. CI runs the binary against a test that is expected to fail so it prints some expected error messages

@ZachJW34 - Yeah, i am still having trouble installing the build generated from this PR with the same console error output (described in earlier comment).

My theory is that it could be a private registry permissions auth issue, or i need some special localised npm configuration to access builds from third-party (non-default) registry, albeit via the Cypress CDN 🤔

ZachJW34 · 2022-07-15T16:37:23Z

@Sayvai Added the build for darwin, if you are using that platform can you try that out? I downloaded it and it's working for me now.

Sayvai · 2022-07-15T17:12:40Z

@ZachJW34 - I've finally managed to download the build via the cypress-bot provided npm install command / URL. Thanks for fixing the build!

Now, when i re-ran the test with the PR build, the Cypress browser window still renders out the message Cannot GET /__cypress/src/index.html, preventing a run of the test. No change. (see attached screenshot below)

And if i comment out the global CSS import from within component.ts, I am able to run the test, just without the global styles. Best to kill the Cypress process for reliable reproducibility.

Am i missing another step (configuration) with this change? 🤔

ZachJW34 · 2022-07-15T19:18:51Z

I checked out your repo and the cypress-integration branch. After installing the new binary, I was able to run the tests and verify the global styles were applying. Commenting in and out the import "../../styles/globals.scss"; live-reloaded and ran as expected.

Did you happen to install the new binary when you had an active Cypress instance? If not, can you give post a little more info on how I can reproduce what you are seeing?

Sayvai · 2022-07-15T21:33:12Z

@ZachJW34 - I installed the new binary after uninstalling the stable binary.

Here's the reproduction steps i undertook:

Rename already established repo (command: mv repos/Sayvai/nextjs-playground repos/Sayvai/nextjs-playground-1).
Clone the nextjs-playground repo again to start afresh (command: git clone [email protected]:Sayvai/nextjs-playground.git)
cd into newly cloned repo
checkout the branch cypress-integration (command: git checkout cypress-integration)
uninstall the stable Cypress binary and its reference within package.json file (command: npm uninstall -D cypress)
install the PR-generated binary (command: npm install -D https://cdn.cypress.io/beta/npm/10.3.1/darwin-x64/zachw/issue-22525-0cb8f895934845abb6d6006b21a59ee3aefdb3d5/cypress.tgz)
install all other dependencies (command: npm install)
copy the SSL certificate and key from the old renamed project to newly cloned project into the project root directory level (commands: cp ../nextjs-playground-1/localhost.pem ./localhost.pem and cp ../nextjs-playground-1/localhost-key.pem ./localhost-key.pem)
run main project application (command: npm run dev)
run Cypress interactively in a new terminal tab (command: npm run cypress:open)
the Cypress electron application window opens
click on the Component Testing box within the Cypress electron application window
notice within the terminal output for Cypress, 2 No template for dependency: ModuleHotAcceptDependency errors are logged out (expand console output below; "Cypress Terminal Output"). First error refers to the non-gloabl SCSS import inside an actual component test file of news-aggregator-article.cy.tsx, and the second error refers to the global SCSS import within the component.ts config file.

Cypress Terminal Output

$ npm run cypress:open > [email protected] cypress:open > ./node_modules/.bin/cypress open Missing baseUrl in compilerOptions. tsconfig-paths will be skipped [@cypress/webpack-dev-server]: removing HotModuleReplacementPlugin from configuration. <i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://127.0.0.1:8080/ <i> [webpack-dev-server] Content not from webpack is served from '/Users/sayvai/repos/Sayvai/nextjs-playground/public' directory 13 assets 137 modules ERROR in ./components/layout/layout.module.scss No template for dependency: ModuleHotAcceptDependency ERROR in ./styles/globals.scss No template for dependency: ModuleHotAcceptDependency client (webpack 5.73.0) compiled with 2 errors in 868 ms

now proceed to start to run the component test news-aggregator-article.cy.tsx

the Cypress test browser window fails to run the test, and instead outputs onto the page Cannot GET /__cypress/src/index.html

Have i gone wrong in any of the above steps? Are you able to reproduce the error i observed? 🤔

lmiller1990 · 2022-07-18T03:15:14Z

I had the exact same result as @ZachJW34 - down to the "comment in, comment out" part, see my post here. This weird behavior was without this branch. I am not sure why that is happening. I did not try on this branch, yet.

ZachJW34 · 2022-07-18T21:07:28Z

@Sayvai thanks for the thorough reproduction. Unfortunately, I can't reproduce this issue following your steps (though I don't have any SSL certs to copy). @lmiller1990 when you pull this down, can you go through the reproduction steps provided by @Sayvai and see if you are experiencing any issues?

ZachJW34 · 2022-07-19T15:12:53Z

@Sayvai Okay I was able to reproduce this. The issue seems to be related to the .next/cache. If you remove it and run npm run cypress:open it should work. The problem is that the cache from npm run dev and npm run cypress:open corrupt each other, so investigating how to workaround this

ZachJW34 · 2022-07-19T16:47:51Z

@Sayvai I'm hoping it is fixed now. Can you try one of the newer binaries (https://cdn.cypress.io/beta/npm/10.3.1/darwin-x64/zachw/issue-22525-7a65ef80e1b2fd15f0abb743d53d80b61e9a1cdc/cypress.tgz).

You might need to blow away the next cache via rm -rf .next. You shouldn't have to do this more than once

Sayvai · 2022-07-19T18:13:31Z

@ZachJW34 - Bingo! You were right to point out the additional caching issue too with Next.js.

I can now confidently confirm that your latest fixes fixed the issue completely, as i can see the global styles now applied within the Cypress Chrome test runner window (screenshot below), and i also no longer see any further error output in the terminal sessions either.

I would like to thank @ZachJW34 and @lmiller1990 for assisting me with this Next.JS global styles import issue, and being done so in a very prompt and patient manner. 💯

I'll look forward to the next patch release cut (assumed 10.3.2 now?) which will include this fix.

Many thanks both 🎉

npm/webpack-dev-server/src/helpers/nextHandler.ts

ZachJW34 · 2022-07-20T14:23:11Z

@Sayvai thanks for finding the issue and the words of encouragement! It goes a long way ❤️

Like you said, this should be available in the next release of Cypress!

mike-plummer

LGTM, just one potential comment/guard worth adding

npm/webpack-dev-server/src/helpers/nextHandler.ts

ryanthemanuel

Looks good nice work!

…guide Issue was fix in cypress-io/cypress#22769

…guide (#4771) Issue was fix in cypress-io/cypress#22769

fix: allow next.js apps to import global styles

7f1dc8b

ZachJW34 requested review from a team as code owners July 13, 2022 17:22

ZachJW34 requested review from ryanthemanuel and lmiller1990 and removed request for a team July 13, 2022 17:23

ZachJW34 mentioned this pull request Jul 13, 2022

Cypress 10 | SASS Global Style File Imports Within Next.js - Unable To Run Cypress Component Test #22525

Closed

add unit test and fix types

a049ed7

ZachJW34 requested a review from astone123 July 13, 2022 19:39

lmiller1990 reviewed Jul 14, 2022

View reviewed changes

add global style assertion

b0e8bf0

Merge branch 'develop' into zachw/issue-22525

8473612

lmiller1990 self-requested a review July 15, 2022 05:55

lmiller1990 approved these changes Jul 15, 2022

View reviewed changes

ZachJW34 and others added 2 commits July 15, 2022 10:42

add mac binary build for testing

e93e9f8

Merge branch 'develop' into zachw/issue-22525

0cb8f89

Merge remote-tracking branch 'origin/develop' into zachw/issue-22525

6c56467

ZachJW34 requested a review from marktnoonan July 18, 2022 21:16

ZachJW34 added 3 commits July 19, 2022 10:45

change next webpack cache path

56f5d69

Merge remote-tracking branch 'origin/develop' into zachw/issue-22525

7a65ef8

add cache test

3363d1a

Sayvai reviewed Jul 19, 2022

View reviewed changes

npm/webpack-dev-server/src/helpers/nextHandler.ts Outdated Show resolved Hide resolved

ZachJW34 added 2 commits July 20, 2022 09:13

reduce ts type narrowing

3746064

Merge remote-tracking branch 'origin/develop' into zachw/issue-22525

58f9fd6

mike-plummer approved these changes Jul 20, 2022

View reviewed changes

npm/webpack-dev-server/src/helpers/nextHandler.ts Show resolved Hide resolved

ryanthemanuel approved these changes Jul 20, 2022

View reviewed changes

ZachJW34 and others added 5 commits July 20, 2022 17:55

add comment for regex rules

2c0879d

Merge remote-tracking branch 'origin/develop' into zachw/issue-22525

ed80803

Merge branch 'develop' into zachw/issue-22525

dc095ca

revert circle.yml changes

ec33390

Merge remote-tracking branch 'origin/develop' into zachw/issue-22525

c53e0ab

ZachJW34 merged commit 2027f1d into develop Jul 21, 2022

ZachJW34 deleted the zachw/issue-22525 branch July 21, 2022 19:36

elylucas added a commit to cypress-io/cypress-documentation that referenced this pull request Oct 6, 2022

docs: removing next.js global style workaround in ct troubleshooting …

750883d

…guide Issue was fix in cypress-io/cypress#22769

elylucas mentioned this pull request Oct 6, 2022

docs: removing next.js global style workaround in ct troubleshooting … cypress-io/cypress-documentation#4771

Merged

elylucas added a commit to cypress-io/cypress-documentation that referenced this pull request Oct 6, 2022

docs: removing next.js global style workaround in ct troubleshooting …

548c26d

…guide (#4771) Issue was fix in cypress-io/cypress#22769

ZachJW34 mentioned this pull request Oct 6, 2022

Error importing css file (with tailwind) in support file in NextJS #21864

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: allow next.js apps to import global styles #22769

fix: allow next.js apps to import global styles #22769

ZachJW34 commented Jul 13, 2022

cypress-bot bot commented Jul 13, 2022

cypress bot commented Jul 13, 2022 •

edited

Loading

lmiller1990 left a comment

lmiller1990 Jul 14, 2022

ZachJW34 Jul 14, 2022

Sayvai commented Jul 14, 2022

ZachJW34 commented Jul 14, 2022

lmiller1990 left a comment

Sayvai commented Jul 15, 2022

ZachJW34 commented Jul 15, 2022

Sayvai commented Jul 15, 2022

ZachJW34 commented Jul 15, 2022

Sayvai commented Jul 15, 2022 •

edited

Loading

lmiller1990 commented Jul 18, 2022

ZachJW34 commented Jul 18, 2022 •

edited

Loading

ZachJW34 commented Jul 19, 2022

ZachJW34 commented Jul 19, 2022 •

edited

Loading

Sayvai commented Jul 19, 2022

ZachJW34 commented Jul 20, 2022

mike-plummer left a comment

ryanthemanuel left a comment

		@@ -1 +1,4 @@
		//
		// Importing global styles fails with Next.js due to restrictions on style imports.

fix: allow next.js apps to import global styles #22769

fix: allow next.js apps to import global styles #22769

Conversation

ZachJW34 commented Jul 13, 2022

User facing changelog

Additional details

Steps to test

How has the user experience changed?

PR Tasks

cypress-bot bot commented Jul 13, 2022

cypress bot commented Jul 13, 2022 • edited Loading

Test summary

Run details

Flakiness

lmiller1990 left a comment

Choose a reason for hiding this comment

lmiller1990 Jul 14, 2022

Choose a reason for hiding this comment

ZachJW34 Jul 14, 2022

Choose a reason for hiding this comment

Sayvai commented Jul 14, 2022

ZachJW34 commented Jul 14, 2022

lmiller1990 left a comment

Choose a reason for hiding this comment

Sayvai commented Jul 15, 2022

ZachJW34 commented Jul 15, 2022

Sayvai commented Jul 15, 2022

ZachJW34 commented Jul 15, 2022

Sayvai commented Jul 15, 2022 • edited Loading

lmiller1990 commented Jul 18, 2022

ZachJW34 commented Jul 18, 2022 • edited Loading

ZachJW34 commented Jul 19, 2022

ZachJW34 commented Jul 19, 2022 • edited Loading

Sayvai commented Jul 19, 2022

ZachJW34 commented Jul 20, 2022

mike-plummer left a comment

Choose a reason for hiding this comment

ryanthemanuel left a comment

Choose a reason for hiding this comment

cypress bot commented Jul 13, 2022 •

edited

Loading

Sayvai commented Jul 15, 2022 •

edited

Loading

ZachJW34 commented Jul 18, 2022 •

edited

Loading

ZachJW34 commented Jul 19, 2022 •

edited

Loading