-
Notifications
You must be signed in to change notification settings - Fork 12k
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
Comments
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:
|
I've removed packages that required the npm ci --legacy-peer-deps parameter dependency. Locally and in Jenkins I see that
while |
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:
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 |
I suspect this is caused by some NPM module hoisting issues/bugs unfortunately without a reproduction we cannot investigate this issue any further. |
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. |
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. |
Same here. We are struggling with exactly the same issue. From 14 to 15 |
We were able to resolve the issue by only using |
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 :(. |
Seeing this error as well, it happens randomly on CI builds. When building for production I see the error message:
The filename changes, but the 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:
(Multiple similar messages, edited for readability) In this run it looks like a race where some runs will cause the |
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. |
As a follow up, we also tried to remove all |
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. The issue was never reproduced in LOCAL, always in a github action machine (Ubuntu Latest) |
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'; or @use '@angular/material/core/theming/theming' ; to use: theming.get-color-from-palette |
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. |
I have the same issue as above. Here is what worked for me, hope its helpful
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Command
build, test
Is this a regression?
The previous version in which this bug was not present was
13
Description
We are seeing flaky Sass errors during
ng build
andng 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
_variables.scss
theme.scss
styles.scss
Minimal Reproduction
These errors only happen in our Jenkins pipeline, where a Chromium image with Node 18.15 is installed.
Exception or Error
Your Environment
Anything else relevant?
Solutions attempted:
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
The text was updated successfully, but these errors were encountered: