Cypress component tests - SCSS files can't resolve assets

[konstantinschuette]

Current Behavior

Serving and building the apps works perfectly fine, this issue is only happening for the cypress component tests.
When running the component tests, SCSS errors are thrown. It seems like the postcss-loader can't resolve the paths. But the icons and fonts are properly loaded in the app, when I run the tests.

The only exception is that I have defined the assets from the libs folder to resolve to /assets. This doesn't seem to work. I have to define it like this that the path is correctly resolved: <img src="assets/logo.svg">

"assets": [
  "apps/products/src/favicon.ico",
  "apps/products/src/assets",
  {
    "glob": "**/*",
    "input": "libs/assets/src/lib/assets",
    "output": "/assets"
  }
],

Expected Behavior

The SCSS import paths should be correctly resolved without any errors when building.

GitHub Repo

https://github.com/konstantinschuette/nx-ng-cypress-component-test-scss-error

Steps to Reproduce

1. Clone https://github.com/konstantinschuette/nx-ng-cypress-component-test-scss-error
2. nx run products:component-test --watch

Nx Report

Node   : 20.11.1
OS     : darwin-arm64
npm    : 10.2.4

nx (global)        : 18.0.4
nx                 : 18.2.4
@nx/js             : 18.2.4
@nx/jest           : 18.2.4
@nx/linter         : 18.2.4
@nx/eslint         : 18.2.4
@nx/workspace      : 18.2.4
@nx/angular        : 18.2.4
@nx/cypress        : 18.2.4
@nx/devkit         : 18.2.4
@nx/eslint-plugin  : 18.2.4
@nrwl/tao          : 18.2.4
@nx/web            : 18.2.4
@nx/webpack        : 18.2.4
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

No response

[konstantinschuette]

I spend some more time figuring out if I could resolve it on my own, but sadly I couldn't resolve it. I also created a brand new repo with npx create-nx-workspace in order to have everything up to date.

The AppComponent has every case covered, so I think it's a nice setup to debug it:
https://github.com/konstantinschuette/nx-ng-cypress-component-test-scss-error/blob/main/apps/products/src/app/app.component.html

Also when I change the assets to only this: "../../libs/assets/src/lib/assets" Then I get this error:
`Error: The ../../libs/assets/src/lib/assets asset path must start with the project source root.``

Maybe that's a general issue with the path mapping

[konstantinschuette]

I updated the dependencies from 18.1.3 to 18.2.4 and the errors are still happening.

[konstantinschuette]

@FrozenPandaz Can you please give a rough estimation when you can look into this? This issue currently blocks us from starting with cypress component tests

[leosvelperez]

Hey @konstantinschuette! I'm sorry for the delay in responding. I'll have a look and post here any updates.

[leosvelperez]

@konstantinschuette, I can reproduce the issue on an Angular CLI repo with Cypress (no Nx). This seems to be a limitation on the Cypress side, and I created an issue on their repo to track it: cypress-io/cypress#29483.

[maartentibau]

I'm dealing with the exact issue as well.

I assume that nx will use the settings defined in on the deServerTarget when it comes to the assets part, but that does not seem to work. I'm currently using v18.3.4 with Cypress v13.7.3 although I'm pretty sure this is not an Cypress issue but more an nx issue.

Looking at the output in the terminal I can see that Cypress is trying to load the assets but they are not available in that path.

config

[leosvelperez]

I'm closing this in favor of the upstream issue cypress-io/cypress#29483. Unfortunately, there's nothing we can do on the Nx side to address this. Please follow the linked issue in the Cypress repo for a resolution.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.