angular
bug(Angular Material Components: @use '@material/typography' as mdc-typography; error during Bitbucket Pipeline build
Is this a regression?
- [X] 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/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/typography/_definition.scss 4:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/typography/_versioning.scss 2:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/theming/_m2-inspection.scss 6:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_uazmdyi7rlcwq43mlshwzo3k7q/node_modules/@angular/material/core/theming/_inspection.scss 4:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_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
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
@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 ?
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/@[email protected]_@[email protected][email protected][email protected]__@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/[email protected][email protected]/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/[email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/sass-loader/dist/cjs.js):
Module loop: this module is already being loaded.
┌──> ../../node_modules/.pnpm/@[email protected]/node_modules/@material/typography/_typography.scss
31 │ @use '@material/feature-targeting/feature-targeting';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ new load
╵
┌──> ../../node_modules/.pnpm/@[email protected]/node_modules/@material/focus-ring/_focus-ring.scss
23 │ @use '@material/feature-targeting/feature-targeting';
│ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
╵
../../node_modules/.pnpm/@[email protected]/node_modules/@material/typography/_typography.scss 31:1 @forward
../../node_modules/.pnpm/@[email protected]/node_modules/@material/typography/_variables.scss 24:1 @forward
@material/elevation/_index.scss 1:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/tokens/_token-utils.scss 3:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/core/tokens/m2/mat/_app.scss 1:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_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/[email protected][email protected][email protected]_@[email protected][email protected]_/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
╷
34 │ @use '@material/focus-ring/focus-ring';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
../../node_modules/.pnpm/@[email protected]/node_modules/@material/button/_button-shared-theme.scss 34:1 @use
@material/button/_button-text-theme.scss 31:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_zone.js@0_at4bi5yn777lgylhwjusj6m3fu/node_modules/@angular/material/button/_button-theme.scss 1:1 @use
../../node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]_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?
I'm closing this since it isn't actionable. It can be reopened if there's new information.
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[bot] avatar](https://avatars.githubusercontent.com/in/40213?v=4 "Published by a pub.dev verified publisher"){kind=small}