components: bug(material): ci/cd build failed with wrong imports

We have a similar issue within our project.

We have migrated step by step from Angular v12 to v13, then from v13 to v14 and so on, finally arriving at the latest v15. We have used the migration schematics and the official update guide.

And now approx. one of five builds fails on our CI server (Jenkins) with similar error messages: (We aren’t able to reproduce this issue on our dev machines though…)

./src/app/my-foobar.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Module loop: this module is already being loaded.
  ┌──> node_modules/@material/button/_button.scss
26│ @use '@material/feature-targeting/feature-targeting';
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
  ╵
  ┌──> src/app/my-foobar.component.scss
1 │ @use 'styles/settings/colors';
  │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
  ╵
  @angular/_button.scss 26:1                                                                                         @use
  @material/button/_colors.scss 2:1                                                                                  @use
  node_modules/@angular/material/button/_button-theme.scss 2:1                                                       @use
  node_modules/@angular/material/core/density/private/_all-density.scss 2:1                                          @forward
  styles/settings/_index.scss 18:1                                                                                   @use
  src/app/my-foobar.component.scss 1:1  root stylesheet

./src/app/another-foobar.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
    ╷
131 │ $primary: mat.define-palette(color-palettes.$mat-foobar-blue, 900, 700, 900);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  @material/theme/_colors.scss 131:11                                      @use
  styles/settings/_variables.scss 23:1                                     @use
  src/app/another-foobar.component.scss 1:1  root stylesheet

./src/app/and-another.component.scss?ngResource - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
24 │ @use '@material/tab/variables' as tab-variables;
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules/@material/tab-bar/_variables.scss 24:1                                @forward
  @material/_index.scss 1:1                                                          @use
  node_modules/@angular/material/tabs/_tabs-theme.scss 8:1                           @use
  node_modules/@angular/material/core/density/private/_all-density.scss 28:1         @forward
  @angular/_index.scss 18:1                                                          @use
  styles/settings/_colors.scss 2:1                                                   @use
  src/app/and-another.component.scss 1:1  root stylesheet

We have tried to use the legacy SASS API by setting the NG_BUILD_LEGACY_SASS env var to true. But, unfortunately this doesn’t resolve the issue.

Same setup as @monkeycatdog: Legacy theming and components.

Feels very much like a race condition within the SASS processing stack. 🤷‍♂️

Appreciate any kind of help / tip to mitigate this issue.

It amazes me that this issue is still open.

@alan-agius4 Since you closed https://github.com/angular/angular-cli/issues/25018 I’m going for the long shot and tag you here, since this issue is the same and does have a reproducable example.

Ping to give this a minor spotlight again. Anybody stumbled into a solution other than retrying the builds ever so often?

@PhilippMeissner I’ve finally succeeded into reproducing the issue. Here is the repo: https://github.com/Carniatto/angular15SaasIssue

just run: docker build -f tools/Dockerfile -t build:v3 . --no-cache --progress=plain Might need couple runs to get the error.

I have updated the Dockerfile with a publicly available image.

I’m hoping to get some attention on this issue, right now this is keeping my team stuck on Angular 14

To possibly attract more people with the same issue, here’s the error that pops up when inside angular.json we set "optimization": true (and therefore lose a good amount of errors):

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
path/to/app/src/app/foobar/foobar.component.scss:17:100: ERROR: Unterminated string token

Yet there is no line 17 in this component. All it does is @use/@import a file containing variables/mixins as seen in the comments above. Also, the component this error pops up for is seemingly random.

Running with Node v. 18.13.x

I have not seen this issue occur locally though, only in CI.

Same here. I think it’s about the CIs performance. I noticed the CI often runs into the error when it runs the “first time” after waking up. The consecutive runs usually run smoothly.

Our team is facing the same issue in our CI environment. Any update on this?

Would be good to have some guidance at least. Maybe we need to restructure how we do styles in a multi app environment. Hoping someone will help us

We have the same issue, is there any solution for this?

Thanks for the work and heads-up! I had to use another node image due to restricted access. I could reproduce this issue in 1 of ~10 runs (In our CI it happens far more often, around 30-40% of the time).

All of the info given so far leads me to believe that this can only be a race condition of some sorts inside webpack/sass-loader… Hopefully somebody of the angular team finds some time to investigate or push us in the right direction.

I’ll work this weekend in creating a reproduction repo for this issue. For now, this is a blocker to update to Angular 15

I’m also having this issue, cannot figure out the problem, re-running usually fixes it. Not good for our CI

SassError: Can't find stylesheet to import.
  ╷
6 │ @use '@material/tab' as mdc-tab;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/@angular/material/tabs/_tabs-theme.scss 6:1                                     @use
  node_modules/@angular/material/core/density/private/_all-density.scss 28:1                   @forward
  @angular/_index.scss 18:1