Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sass errors after migrating from Angular 13 to 15 / Node 14 to 18 #25018

Closed
1 task done
sramocki opened this issue Apr 13, 2023 · 18 comments
Closed
1 task done

Sass errors after migrating from Angular 13 to 15 / Node 14 to 18 #25018

sramocki opened this issue Apr 13, 2023 · 18 comments
Labels
needs: repro steps We cannot reproduce the issue with the information given

Comments

@sramocki
Copy link

Command

build, test

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

13

Description

We are seeing flaky Sass errors during ng build and ng test after upgrading our project from Angular 13 to 15. We use a custom theme on the legacy components.

I have disabled optimization in order to see the stack trace of the error, however the output is different each time it fails as is the error.

Errors:
Unterminated string token
SassError: Can't find stylesheet to import.
SassError: Undefined variable.
SassError: Module loop: this module is already being loaded.

angular.json

  "styles": [
    "src/styles/theme.scss",
    "src/styles/styles.scss"
  ],
  "stylePreprocessorOptions": {
    "includePaths": ["src/styles"]
  },

_variables.scss

@use '@angular/material' as mat;
$fun2-light-color: #323a45;
...

theme.scss

@use '@angular/material' as mat;
@use 'variables' as v;

$app-theme: mat.define-light-theme(
  (
    color: (
      primary: v.$primary,
      accent: v.$accent,
    ),
  )
);
@include mat.all-legacy-component-typographies();
@include mat.legacy-core();
@include mat.all-legacy-component-themes($app-theme);

styles.scss

@use '@angular/material' as mat;
@use 'variables' as v;

body {
  margin: 0;
}
...
fun.component.scss
@use 'variables' as v;

  .accept {
    border: 2px solid v.$fun2-disabled-color;
  }
...

Minimal Reproduction

These errors only happen in our Jenkins pipeline, where a Chromium image with Node 18.15 is installed.

  1. npm ci --legacy-peer-deps
  2. npm run ngcc
  3. ng test --code-coverage --watch=false --browsers ChromiumHeadlessDebug --reporters=progress,coverage
  4. ng build --configuration production

Exception or Error

Optimization on:
./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Transform failed with 1 error:
/work/src/app/fun/fun.component.scss:17:100: ERROR: Unterminated string token

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

Optimization off:
./src/app/fun/fun.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
26 │ @use '@material/feature-targeting/feature-targeting';

   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  _button.scss 26:1                                  @use
  src/app/fun/fun.component.scss 1:1  root stylesheet




./src/app/person/person.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
2 │ @use '@material/button/button' as mdc-button;

  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules/@angular/material/button/_button-theme.scss 2:1               @use
  node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  _index.scss 18:1                                                           @use
  src/app/user/user.component.scss 1:1                                       root stylesheet




./src/app/fun2/fun2.component.scss?ngResource - Error: Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):

SassError: Undefined variable.
39 │   background: v.$fun2-light-color;
   │               ^^^^^^^^^^^^^^^^^^^^^^^^^^
  src/app/fun2/fun2.component.scss 39:15  root stylesheet

Your Environment

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 15.2.6
Node: 18.15.0
Package Manager: npm 9.1.2
OS: Alpine Linux 3.17.2

Angular: 15.2.6
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------       
@angular-devkit/architect       0.1502.5
@angular-devkit/build-angular   15.2.5
@angular-devkit/core            15.2.5
@angular-devkit/schematics      15.2.5
@angular/cli                    15.2.5
@angular/flex-layout            15.0.0-beta.42
@schematics/angular             15.2.5
rxjs                            6.5.5
typescript                      4.9.5

Packages:
 "dependencies": {
    "@angular/animations": "15.2.6",
    "@angular/cdk": "15.2.6",
    "@angular/common": "15.2.6",
    "@angular/compiler": "15.2.6",
    "@angular/core": "15.2.6",
    "@angular/flex-layout": "^15.0.0-beta.42",
    "@angular/forms": "15.2.6",
    "@angular/localize": "15.2.6",
    "@angular/material": "15.2.6",
    "@angular/material-moment-adapter": "15.2.6",
    "@angular/platform-browser": "15.2.6",
    "@angular/platform-browser-dynamic": "15.2.6",
    "@angular/router": "15.2.6",
    "core-js": "^3.30.0",
    "rxjs": "6.5.5",
    "tslib": "^2.5.0",
    "zone.js": "^0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular/cli": "^15.2.6",
    "@angular/compiler-cli": "^15.2.6",
    "@angular/language-service": "^15.2.6",
    "@types/node": "^18.15.11",
    "http-server": "^14.1.1",
    "subsink": "^1.0.2",
    "tsutils": "^3.21.0",
    "typescript": "^4.9.5",
    "webdriver-manager": "^12.1.9",
  }

Anything else relevant?

Solutions attempted:

  • Downgrading TS to 4.8.4
  • Running npx browserslist --update-db (We do not use .browserslist)
  • Adding node_modules to stylePreprocessorOptions includePaths
  • Set preserveSymlinks true/false
  • Disabling cache

Related issues:
material-components/material-components-web#7770
#25122
#24467
https://stackoverflow.com/questions/71916458/editor-component-scss17100-error-unterminated-string-token-angular-scss
https://stackoverflow.com/questions/75531808/angular-15-cant-create-custom-material-theme
https://stackoverflow.com/questions/75740820/getting-material-component-error-while-migrating-from-angular-9-1-to-15

@alan-agius4
Copy link
Collaborator

Hi, since this is happening only in the CI environment, I would start by checking what is different in this environment.

The errors suggest that these modules cannot be found. Can you verify that they are indeed installed correctly on CI?

Example:

npm ls @material/feature-targeting
npm ls @material/button/button

@alan-agius4 alan-agius4 added the needs: more info Reporter must clarify the issue label Apr 14, 2023
@sramocki
Copy link
Author

Hi, since this is happening only in the CI environment, I would start by checking what is different in this environment.

The errors suggest that these modules cannot be found. Can you verify that they are indeed installed correctly on CI?

Example:

npm ls @material/feature-targeting
npm ls @material/button/button

I've removed packages that required the npm ci --legacy-peer-deps parameter dependency. Locally and in Jenkins I see that npm ls @material/feature-targeting returns

@angular/material@15.2.6
  ├─┬ @material/banner@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/button@15.0.0-canary.684e33d25.0
  │ ├── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  │ └─┬ @material/focus-ring@15.0.0-canary.684e33d25.0
  │   └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/card@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/checkbox@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/chips@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/circular-progress@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/data-table@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/dialog@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/dom@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/drawer@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/elevation@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/fab@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├── @material/feature-targeting@15.0.0-canary.684e33d25.0
  ├─┬ @material/floating-label@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/form-field@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/icon-button@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/image-list@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/line-ripple@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/linear-progress@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/list@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/menu-surface@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/menu@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/notched-outline@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/radio@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/ripple@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/segmented-button@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/select@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/shape@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/slider@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/snackbar@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/switch@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/tab-bar@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/tab-indicator@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/tab-scroller@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/tab@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/textfield@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/theme@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/tooltip@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  ├─┬ @material/touch-target@15.0.0-canary.684e33d25.0
  │ └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped
  └─┬ @material/typography@15.0.0-canary.684e33d25.0
    └── @material/feature-targeting@15.0.0-canary.684e33d25.0 deduped

while npm ls @material/button/button returns └── (empty)

@rudxde
Copy link

rudxde commented Apr 16, 2023

Hi, since this is happening only in the CI environment, I would start by checking what is different in this environment.

I have the same issue, but the problem occures only in some builds. When rerunning the same pipeline the build passes without issues. Since the dependencies are installed with 'npm ci' and cached, the issue seems to be some kind of race condition.

Im using an nrwl nx monorepo. The issue seems to appear only in the "main"- angular application. Im using the following versions:

       "nx": "15.9.2",
       "@angular-devkit/build-angular": "15.2.2",
        "@angular-devkit/core": "~15.1.0",
        "@angular-devkit/schematics": "~15.1.0",
        "@angular-eslint/eslint-plugin": "15.0.0",
        "@angular-eslint/eslint-plugin-template": "15.0.0",
        "@angular-eslint/template-parser": "15.0.0",
        "@angular/animations": "15.2.2",
        "@angular/cdk": "15.2.2",
        "@angular/cli": "~15.2.0",
        "@angular/common": "15.2.2",
        "@angular/compiler": "15.2.2",
        "@angular/compiler-cli": "15.2.2",
        "@angular/core": "15.2.2",
        "@angular/forms": "15.2.2",
        "@angular/language-service": "15.2.2",
        "@angular/material": "15.2.2",
        "@angular/platform-browser": "15.2.2",
        "@angular/platform-browser-dynamic": "15.2.2",
        "@angular/pwa": "^15.2.2",
        "@angular/router": "15.2.2",
        "@angular/service-worker": "15.2.2",
       "typescript": "4.9.5",

Im using angular material with the 15 and legacy components mixed, since im not done migrating.

The error appears apparently random in scss files of components, but always at :17:100, in scss files where i use som scss imports.

@alan-agius4
Copy link
Collaborator

I suspect this is caused by some NPM module hoisting issues/bugs unfortunately without a reproduction we cannot investigate this issue any further.

@alan-agius4 alan-agius4 added needs: repro steps We cannot reproduce the issue with the information given and removed needs: more info Reporter must clarify the issue labels Apr 20, 2023
@alan-agius4
Copy link
Collaborator

Thanks for reporting this issue. However, you didn't provide sufficient information for us to understand and reproduce the problem. Please check out our submission guidelines to understand why we can't act on issues that are lacking important information.

If the problem persists, please file a new issue and ensure you provide all of the required information when filling out the issue template.

@alan-agius4 alan-agius4 closed this as not planned Won't fix, can't repro, duplicate, stale Apr 26, 2023
@adhed
Copy link

adhed commented May 23, 2023

I have the same issues in Angular15 webapp which started to occur after upgrading into version 15 from 14. Exactly the same random issues with "SassError: Undefined variable" / "SassError: Module loop: this module is already being loaded.". Also typically there is an error with "@use '@material/button/button' as mdc-button;" message.

Have you already resolved it @sramocki / @rudxde?

@jose-alvarez-r
Copy link

jose-alvarez-r commented May 25, 2023

Same here. We are struggling with exactly the same issue. From 14 to 15

@sramocki
Copy link
Author

sramocki commented May 27, 2023

I have the same issues in Angular15 webapp which started to occur after upgrading into version 15 from 14. Exactly the same random issues with "SassError: Undefined variable" / "SassError: Module loop: this module is already being loaded.". Also typically there is an error with "@use '@material/button/button' as mdc-button;" message.

Have you already resolved it @sramocki / @rudxde?

We were able to resolve the issue by only using '@use '@angular/material' as mat; in our theme scss file (included in the style's array). We copied the functions we needed from @angular/material to a new scss file, and imported (using @use and @forward) it into our variable scss file (for creating palettes for example). Not ideal but it solved our problem of flaky build failures for now.

@BearintheWillows
Copy link

Just to say, I have this issue after starting a fresh Angular 15 web app. Not sure why, fairly new... guess i can't use sass right now :(.

@kskem
Copy link

kskem commented Jun 12, 2023

Seeing this error as well, it happens randomly on CI builds. When building for production I see the error message:

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

The filename changes, but the .scss:17:100 is constant.

Disabling optimization I can extract the error, but as noted by @sramocki it can be different and is hard to debug due to the sporadic failures:

./src/shared/components/style.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/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
  /src/assets/styles/_index.scss 18:1                                        @import
  src/shared/components/styles.component.scss 1:9     root stylesheet

(Multiple similar messages, edited for readability)

In this run it looks like a race where some runs will cause the @import to be triggered multiple times, where other runs cause a conflict.

@jose-alvarez-r
Copy link

Exactly the same steps for me. I tried everything, and sometimes this is stopping us to build in pipeline because the issue is now very frequent.

@kskem
Copy link

kskem commented Jun 13, 2023

As a follow up, we also tried to remove all @import in favor of @use but the problem persists. My best guess is that this is caused by multi-threaded loading with insufficient locking.

@jose-alvarez-r
Copy link

Make sense.

Also, material sass are always somehow "involve". We are using mat legacy because we could not fully migrate. I am wondering if once we move to final material component the issue will be gone.

I also tried moving to the latest version of material within v15. Same.
I tried limiting the use of mat across the application. Same, material will complain.
I tried adding removing sass from "stylePreprocessorOption". Same.

The issue was never reproduced in LOCAL, always in a github action machine (Ubuntu Latest)

@jose-alvarez-r
Copy link

New approach: I removed all @imports in my sass, and I used @use. I really thought that the problem was there, but it is not, same issue in the pipeline :(

@jose-alvarez-r
Copy link

I fine-granulated the @use from material, and it seems to alleviate the symptoms: now I am getting the same issue but far less frequently:

Instead of @use the entire @material/core , I am using just the one I need it , for example :

@use '@angular/material/core/typography/typography';
then I use --> typography.define-typography-level(etc)

or

@use '@angular/material/core/theming/theming' ;

to use:

theming.get-color-from-palette

@jose-alvarez-r
Copy link

Well it seems that the issue is gone when I avoid to @use the material/core for typographies. I copy some typographies functions into a scss file in my project, then I imported from there. The issue seems to be gone.

One thing I notice is that angular/material is using @import for some of theirs index.scss in node_modules, that is completely discouraged by sass team, and it can cause issues like the one we are addressing here.

@rkajbaf
Copy link

rkajbaf commented Jul 3, 2023

I have the same issue as above. Here is what worked for me, hope its helpful

  1. Upgrade to Angular Material 16.1.3
  2. Switch from @import to @use
  3. In angular.json add the following in 2 places build -> options & server -> options (my project uses SSR)
"stylePreprocessorOptions": {
              "includePaths": [
                "src/scss"
              ]
            }

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: repro steps We cannot reproduce the issue with the information given
Projects
None yet
Development

No branches or pull requests

8 participants