bug(Angular Material Components: @use '@material/typography' as mdc-typography; error during Bitbucket Pipeline build

[mattiLeBlanc]

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

17.2.1

Description

When building my angular application in Bitbucket Pipeline, since today I am getting a build error:

Application bundle generation failed. [42.497 seconds]
✘ [ERROR] Error: The "path" argument must be of type string. Received undefined
  ╷
4 │ @use '@material/typography' as mdc-typography;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../../node_modules/.pnpm/@angular+material@17.3.9_@angular+animations@17.3.9_@angular+core@17.3.9_rxjs@7.8.1_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/typography/_definition.scss 4:1  @use
  ../../node_modules/.pnpm/@angular+material@17.3.9_@angular+animations@17.3.9_@angular+core@17.3.9_rxjs@7.8.1_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/typography/_versioning.scss 2:1  @use
  ../../node_modules/.pnpm/@angular+material@17.3.9_@angular+animations@17.3.9_@angular+core@17.3.9_rxjs@7.8.1_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/theming/_m2-inspection.scss 6:1  @use
  ../../node_modules/.pnpm/@angular+material@17.3.9_@angular+animations@17.3.9_@angular+core@17.3.9_rxjs@7.8.1_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/theming/_inspection.scss 4:1     @use
  ../../node_modules/.pnpm/@angular+material@17.3.9_@angular+animations@17.3.9_@angular+core@17.3.9_rxjs@7.8.1_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/typography/_typography.scss 5:1  @forward
  @angular/_index.scss 13:1                                                                                                                                                                                              @use
  src/app/shared/components/help-button/help-button.component.scss 1:1    

on many SCSS files.
I can see in the git commit that my pnpm lock file has receied many updates of angular versions tot the latest 17.3.9 and now I can not deploy my application because of this error.

I cant repoduce it locally even if I do an pnpm run prune and followed by pnpm install and then a pnpm run build.
In Bitbucket I am running image: node:18.14.2. My local macbook node version is v18.17.1.

Does anyone know why I am experiencing these issues on material typography all of a sudden?

Reproduction

Not possible to reproduce since it only happens in my pipeline

Expected Behavior

No build error

Actual Behavior

Build error as described above

Environment

• Angular: 17.3.9
• CDK/Material: 17.3.9
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Error happens in Bitbucket pipeline, node image node:18.14.2

[crisbeto]

This seems weird since we haven't changed any of the @material dependencies in a while. It might be worth trying to add some of these to your package.json, even though it shouldn't be required: https://github.com/angular/components/blob/main/package.json#L100

[mattiLeBlanc]

@crisbeto I had a horrible day of dealing with weird deployment issues that all happened after I deleted a pnpm lockfile and did an pnpm install. It updated a lot of package with minor changes, including Angular and Material and all of a sudden I got this pipeline error.
And that error doesn't happen locally when I deploy monorepo to my dev cloud environment via the AWS CDK.
Bitbucket pipeline is running the exact same code, but with less memory and in a docker container and not on an M1 Max Macbook.
So I don't know if there are memory related issues which causes this to break or if there is a bug in the dependencies but it is a bit scary.

Edit: I did notice PNPM sometimes requires explicit mention of package in the root package when they are peer depedencies.
I am trying to move away from PNPM because it is only giving me headaches so far.

The error I am getting above, seems to be related to typography ?

[mattiLeBlanc]

I am actually getting weird crashes intermittently in my bitbucket pipeline:

- Generating browser application bundles (phase: setup)...
    Components styles sourcemaps are not generated when styles optimization is enabled.
✔ Browser application bundle generation complete.
✔ Browser application bundle generation complete.
Warning: /opt/atlassian/pipelines/agent/build/node_modules/.pnpm/@angular+material-moment-adapter@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0.14.6__@angu_il7di7j3wvd2a25djb5fg57gmu/node_modules/@angular/material-moment-adapter/fesm2022/material-moment-adapter.mjs depends on 'moment'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: /opt/atlassian/pipelines/agent/build/node_modules/.pnpm/amazon-cognito-identity-js@6.3.13_encoding@0.1.13/node_modules/amazon-cognito-identity-js/es/AuthenticationHelper.js depends on '@aws-crypto/sha256-js'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:2:18:
      2 │ /******/ (() => { // webpackBootstrap
        ╵                   ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:15:10:
      15 │ /******/  // startup
         ╵           ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:16:10:
      16 │ /******/  // Load entry module and return exports
         ╵           ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:17:10:
      17 │ /******/  // This entry module doesn't tell about it's top-level d...
         ╵           ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:2:18:
      2 │ /******/ (() => { // webpackBootstrap
        ╵                   ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:15:10:
      15 │ /******/  // startup
         ╵           ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:16:10:
      16 │ /******/  // Load entry module and return exports
         ╵           ~~
Warning: ▲ [WARNING] Comments in CSS use "/* ... */" instead of "//" [js-comment-in-css]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:17:10:
      17 │ /******/  // This entry module doesn't tell about it's top-level d...
         ╵           ~~
Warning: ▲ [WARNING] Unexpected ";" [css-syntax-error]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:1:12:
      1 │ var resource;
        ╵             ^
Warning: ▲ [WARNING] Unexpected ";" [css-syntax-error]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:1:12:
      1 │ var resource;
        ╵             ^
Warning: ▲ [WARNING] Unterminated string token [css-syntax-error]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss:17:100:
      17 │ ...n't tell about it's top-level declarations so it can't be inlined
         ╵                                                                     ^
Warning: ▲ [WARNING] Unterminated string token [css-syntax-error]
    /opt/atlassian/pipelines/agent/build/frontend/family-app/src/app/shared/components/logo/logo.component.scss:17:100:
      17 │ ...n't tell about it's top-level declarations so it can't be inlined
         ╵                                                                     ^
./src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss?ngResource - Error: Module build failed (from ../../node_modules/.pnpm/sass-loader@14.1.1_sass@1.71.1_webpack@5.90.3_@swc+core@1.5.7_esbuild@0.20.1_/node_modules/sass-loader/dist/cjs.js):
Module loop: this module is already being loaded.
   ┌──> ../../node_modules/.pnpm/@material+typography@15.0.0-canary.7f224ddd4.0/node_modules/@material/typography/_typography.scss
31 │ @use '@material/feature-targeting/feature-targeting';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
   ╵
   ┌──> ../../node_modules/.pnpm/@material+focus-ring@15.0.0-canary.7f224ddd4.0/node_modules/@material/focus-ring/_focus-ring.scss
23 │ @use '@material/feature-targeting/feature-targeting';
   │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
   ╵
  ../../node_modules/.pnpm/@material+typography@15.0.0-canary.7f224ddd4.0/node_modules/@material/typography/_typography.scss 31:1                                                                                     @forward
  ../../node_modules/.pnpm/@material+typography@15.0.0-canary.7f224ddd4.0/node_modules/@material/typography/_variables.scss 24:1                                                                                      @forward
  @material/elevation/_index.scss 1:1                                                                                                                                                                                 @use
  ../../node_modules/.pnpm/@angular+material@17.2.1_@angular+animations@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/tokens/_token-utils.scss 3:1  @use
  ../../node_modules/.pnpm/@angular+material@17.2.1_@angular+animations@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/tokens/m2/mat/_app.scss 1:1   @use
  ../../node_modules/.pnpm/@angular+material@17.2.1_@angular+animations@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/tokens/m2/_index.scss 4:1     @forward
  @material/feature-targeting/_index.scss 17:1                                                                                                                                                                        @use
  @angular/_focus-ring.scss 23:1                                                                                                                                                                                      @use
  src/app/modules/resident-profile/components/resident-preference-card/resident-preference-card.component.scss 1:1                                                                                                    root stylesheet
./src/app/shared/components/logo/logo.component.scss?ngResource - Error: Module build failed (from ../../node_modules/.pnpm/sass-loader@14.1.1_sass@1.71.1_webpack@5.90.3_@swc+core@1.5.7_esbuild@0.20.1_/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
   ╷
34 │ @use '@material/focus-ring/focus-ring';
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  ../../node_modules/.pnpm/@material+button@15.0.0-canary.7f224ddd4.0/node_modules/@material/button/_button-shared-theme.scss 34:1                                                                                             @use
  @material/button/_button-text-theme.scss 31:1                                                                                                                                                                                @use
  ../../node_modules/.pnpm/@angular+material@17.2.1_@angular+animations@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/button/_button-theme.scss 1:1               @use
  ../../node_modules/.pnpm/@angular+material@17.2.1_@angular+animations@17.2.1_@angular+core@17.2.1_rxjs@7.8.1_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/density/private/_all-density.scss 2:1  @forward
  @angular/_index.scss 20:1                                                                                                                                                                                                    @use
  src/app/shared/components/logo/logo.component.scss 1:1                                                                                                                                                                       root stylesheet

Those warnings are warnings off things not happening in my SCSS files but probably in the import files of material. I don't have comments or unexpected semi columns.
These errors don't happen everytime, if I reload the deployment it may run fine next time, and the time after it may crash.

Next to Angular 17 I use Material and Tailwind utilities for Flexbox and padding etc.
Not sure if that is causing issues?

[mattiLeBlanc]

Maybe all of this happens because of memory issues in bitbucket

[crisbeto]

I'm closing this since it isn't actionable. It can be reopened if there's new information.

[angular-automatic-lock-bot]

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