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

[monkeycatdog]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

After migration from 14 to 15.1 I have failed time to time builds
I'm still on legacy theming and components.

SassError: Module loop: this module is already being loaded.
   ┌──> node_modules/@material/elevation/_elevation-theme.scss
30 │ @use '@material/theme/custom-properties';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> node_modules/@material/elevation/_elevation.scss
26 │ @use '@material/theme/custom-properties';
   │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
  @material/theme/_elevation-theme.scss 30:1                                 @use
  @material/elevation/_elevation.scss 26:1                                   @use
  node_modules/@material/button/_button-base.scss 27:1                       @forward
  @material/feature-targeting/_button-theme.scss 23:1                        @use
  @material/button/_button.scss 26:1                                         @use
  node_modules/@angular/material/button/_button-theme.scss 3:1               @use
  node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward

Reproduction

Steps to reproduce:
Unfortunately, there is no steps.

Expected Behavior

Successful build

Actual Behavior

Failed build

Environment

• Angular: 15.1
• CDK/Material: 15.1
• Browser(s): -
• Operating System (e.g. Windows, macOS, Ubuntu): macOS/Ubuntu

[monkeycatdog]

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      

[justphil]

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.

[PhilippMeissner]

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

[Carniatto]

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

[littleninja]

Also seeing this intermittently in our CI.

• Started after upgrading from 14 to 15.1
• Still on legacy components and theming
• Failed build environment: Alpine Linux with Node 16 (currently 16.19.1)

  ./src/app/some-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/@angular/material/button/_button-theme.scss
  2 │ @use '@material/button/button' as mdc-button;
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
    ╵
    ┌──> src/styles/_colors.scss
  1 │ @use '@angular/material' as mat;
    │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
    ╵
    node_modules/@angular/material/button/_button-theme.scss 2:1                                             @use
    node_modules/@angular/material/core/density/private/_all-density.scss 2:1                                @forward
    @angular/_index.scss 18:1                                                                                @use
    _colors.scss 1:1                                                                                         @use
    src/app/some-component.scss 1:1  root stylesheet 

[Carniatto]

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

[PhilippMeissner]

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

@Carniatto did you by any chance succeed with a sort of reproducible blank repo?

[Carniatto]

@PhilippMeissner I've not been able to reproduce in a small scale repo. I was able to narrow down a bit the problem in my case. I'm running a big project with many libraries and the errors (example below) seems to always be related to .scss files in one of my libs:

Another interesting piece of information that might be relevant is that if I run a second time the build it passes. Also the libs that cause this error are almost never the same.

I will keep growing the sandbox to try reproducing the problem but so far I already have 2 apps with couple libraries usign the same SCSS structure I have in my app and all the same versions of npm packages but it still compiles normally. I can only guess that this only happens when a big amount of apps/libs is built at once.

I'm ONLY experiencing this problem when running a build inside a docker container based on Alpine 3.15
Here are my versions:

[Carniatto]

@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.

[PhilippMeissner]

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.

[Carniatto]

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

[edolic]

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

[PhilippMeissner]

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

[Carniatto]

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

[brendanowens]

Chiming in to say that we are running into the same issue on Azure pipelines CI, ~1/10 builds has this issue.

We are getting both the SassError: Module loop: this module is already being loaded. and SassError: Undefined function. as other commenters have mentioned.

CI environment:
Node: 16.20.0
Ubuntu: 22.04.2
Angular / CDK / Material: 15.2.1

[Gerardo-QHR]

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

[PhilippMeissner]

Still an issue on our side. Invested a good amount of hours to debug this to no avail. Any chance this will be addressed in future releases?

[oliver3]

So we have this issue at the moment as well, and already spent a lot of time on it.. We did find a related issue with maybe some more info in the angular-cli project (closed unfortunately). Maybe that might spark an idea what's going on?

angular/angular-cli#25018

[wvankuipers]

This is still an issue even with using the latest version of Angular/Material (16.2.4)

[nategreen-dh]

We're also seeing this ✋ in both Angular 15 and 16.

[wvankuipers]

It amazes me that this issue is still open.

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

[wSedlacek]

I can confirm that my team is seeing this issue regularly in Angular 16.
We have been for several months, it seems to occur more frequently as the scale of our project has grown. (Particularly the number of builds we are doing in parallel in CI)

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

Update:
I have seen this error occur on Angular 17 as well.

[PhilippMeissner]

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.

[adhed]

Hey, any news about this issue? any new solutions?

[Carniatto]

The way we solved the issue in my team was by refactoring the styles to use CSS variables hard-coded for most colors from the team. It is not ideal but since this is open for more than a year we had to proceed

[edolic]

The way we solved the issue in my team was by refactoring the styles to use CSS variables hard-coded for most colors from the team. It is not ideal but since this is open for more than a year we had to proceed

That how we solved it as well

[PhilippMeissner]

The way we solved the issue in my team was by refactoring the styles to use CSS variables hard-coded for most colors from the team. It is not ideal but since this is open for more than a year we had to proceed

also pinging @edolic.
Does that mean you used CSS root scoped variables as in

$my-variable: #ffffff
:root {
  --my-variable: $my-variable
}

and use it as var(--my-variable) somewhere else (?)