I have a CI/CD pipeline for an Angular project which yesterday worked fine, but today the same code is returning several errors on the build:
./src/styles.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./src/styles.scss
- Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined variable.
╷ 142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵ node_modules\bootstrap\scss\_utilities.scss 142:15 @import src\styles.scss 7:9 root stylesheet
./src/styles.scss - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_utilities.scss 142:15 @import
src\styles.scss 7:9 root stylesheet
at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:88:9)
at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4879:16
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
at Object.eachLimit (C:\User\user\project\node_modules\neo-async\async.js:3463:5)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
╷
142 │ values: $utilities-border-colors
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules\bootstrap\scss\_utilities.scss 142:15 @import
src\styles.scss 7:9 root stylesheet
at Object.<anonymous> (C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss:1:7)
at C:\User\user\project\node_modules\webpack\lib\javascript\JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (C:\User\user\project\node_modules\tapable\lib\Hook.js:14:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4981:39
at tryRunOrWebpackError (C:\User\user\project\node_modules\webpack\lib\HookWebpackError.js:83:7)
at __webpack_require_module__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4979:12)
at __webpack_require__ (C:\User\user\project\node_modules\webpack\lib\Compilation.js:4936:18)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:5007:20
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3485:9)
at done (C:\User\user\project\node_modules\neo-async\async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (C:\User\user\project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\User\user\project\node_modules\tapable\lib\Hook.js:18:14)
at C:\User\user\project\node_modules\webpack\lib\Compilation.js:4914:43
at symbolIterator (C:\User\user\project\node_modules\neo-async\async.js:3482:9)
at timesSync (C:\User\user\project\node_modules\neo-async\async.js:2297:7)
Generated code for C:\User\user\project\node_modules\css-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!C:\User\user\project\node_modules\postcss-loader\dist\cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!C:\User\user\project\node_modules\resolve-url-loader\index.js??ruleSet[1].rules[6].rules[1].use[0]!C:\User\user\project\node_modules\sass-loader\dist\cjs.js??ruleSet[1].rules[6].rules[1].use[1]!C:\User\user\project\src\styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: Undefined variable.\n ╷\n142 │ values: $utilities-border-colors\n │ ^^^^^^^^^^^^^^^^^^^^^^^^\n ╵\n node_modules\\bootstrap\\scss\\_utilities.scss 142:15 @import\n src\\styles.scss 7:9 root stylesheet");
I could reproduce it in local when I deleted the package-lock.json and generated one new.
This is my package.json
{
"name": "app-name",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0",
"dev": "ng serve --host 0.0.0.0 -c dev",
"debug": "ng serve --host 0.0.0.0 -c debug",
"serve:es5": "ng serve --configuration es5 --host 0.0.0.0",
"build:dev": "ng build --configuration=dev",
"build:preprod": "ng build --configuration=preprod",
"build:prod": "ng build --configuration=production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular-architects/ddd": "^2.0.0",
"@angular/animations": "^13.2.2",
"@angular/cdk": "^13.2.2",
"@angular/common": "^13.2.2",
"@angular/compiler": "^13.2.2",
"@angular/core": "^13.2.2",
"@angular/forms": "^13.2.2",
"@angular/localize": "^13.2.2",
"@angular/material": "^13.2.2",
"@angular/material-moment-adapter": "^13.2.2",
"@angular/platform-browser": "^13.2.2",
"@angular/platform-browser-dynamic": "^13.2.2",
"@angular/router": "^13.2.2",
"@babel/runtime": "^7.16.0",
"@fortawesome/angular-fontawesome": "^0.10.0",
"@fortawesome/fontawesome-svg-core": "^1.3.0",
"@fortawesome/free-solid-svg-icons": "^6.0.0",
"@microsoft/applicationinsights-web": "^2.7.1",
"@ng-bootstrap/ng-bootstrap": "^12.0.0-beta.4",
"@ngrx/effects": "^13.0.2",
"@ngrx/store": "^13.0.2",
"@ngrx/store-devtools": "^13.0.2",
"@ngx-translate/core": "^10.0.2",
"@ngx-translate/http-loader": "^3.0.1",
"@popperjs/core": "^2.10.2",
"@types/bootstrap": "^5.1.6",
"@types/file-saver": "^2.0.3",
"@types/jquery": "^3.5.8",
"amplitude-js": "^8.17.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.0",
"chart.js": "^2.9.4",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.12",
"dropzone": "^6.0.0-beta.2",
"file-saver": "^2.0.5",
"font-awesome": "^4.7.0",
"intl-tel-input": "^17.0.13",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"ng-lottie": "git https://github.com/Jrbebel/ng-lottie.git",
"ng2-nouislider": "^1.8.3",
"ngx-papaparse": "^5.0.0",
"nouislider": "^12.0.0",
"npm": "^8.11.0",
"poeditor-ci": "^1.15.0",
"pretty-checkbox": "^3.0.3",
"rxjs": "^6.6.7",
"tslib": "^2.0.0",
"uuid": "^3.4.0",
"xlsx": "^0.17.4",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.3",
"@angular-eslint/builder": "^12.0.0",
"@angular-eslint/eslint-plugin": "^12.0.0",
"@angular-eslint/eslint-plugin-template": "^12.0.0",
"@angular-eslint/schematics": "^13.1.0",
"@angular-eslint/template-parser": "^12.0.0",
"@angular/cli": "^13.2.3",
"@angular/compiler-cli": "^13.0.0",
"@angular/language-service": "^13.2.2",
"@types/chart.js": "^2.9.34",
"@types/node": "^12.20.45",
"@typescript-eslint/eslint-plugin": "4.28.2",
"@typescript-eslint/parser": "4.28.2",
"codelyzer": "^6.0.0",
"eslint": "^7.26.0",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-jsdoc": "30.7.6",
"eslint-plugin-prefer-arrow": "1.2.2",
"protractor": "^7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "4.5.5"
}
}
I don't even use the $utilities-border-colors variables and aren't present in my code.
My node version is 16.16 My npm version is 8.14.0
Could be that I have to update any of the dependencies, and why if I didn't change anything, it just doesn't work now?
Thanks in advance.
As it's said in the comments by Krenom, removing the ^ from the Bootstrap import fixed the issue.
Thanks for the responses and all the info.
CodePudding user response：
You can try to remove your node_modules directory and package-lock.json file. Then npm install.
And check if the error still append.
As @krenom say, it coulb be highter boostrap version dowloaded during the build. You can remove the ^ before the version in your package.json and reinstall your node_modules.
CodePudding user response：
You are kind of right, it's a bit strange that it happened without changing anything.
The reason of that is that yesterday a commit
took place on the main branch of twbs/
bootstrap, the v5.2.0 update.
The easy way to revert the changes is to follow @krenom advice.
Additionally, if you mind to install the v5.2.0 update please make sure to be advised about the new Sass file _maps.scss that comes with several Sasss maps from _variables.scss.
You can read more here.
CodePudding user response：
I'll be greedy and slap it as an answer so that it can be accepted and one is available for those that follow.
The dangers of using
^style versioning. Any one of those things might have been installed as a slightly different version that now breaks something. Bootstrap, at a guess given the error message and a new version was pushed out yesterday according to npm. Start with that and lock it down to a specific version (maybe just 5.1.3 for now, so just remove the^) and see if that builds again.