I just upgraded my app from Angular 12 to 13. When I do an ng serve, I get the following error:
./src/styles/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/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
╷
4 │ @import "../node_modules/@clr/ui/src/utils/dependencies.clarity";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/styles/styles.scss 4:9 root stylesheet
./src/styles/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: $string: (((((((((), input[type=text]), input[type=password]), input[type=number]), input[type=email]), input[type=url]), input[type=tel]), input[type=date]), input[type=time]), input[type=datetime-local] is not a string.
╷
22 │ @return quote($inputs);
│ ^^^^^^^^^^^^^^
╵
node_modules/@clr/ui/src/utils/_helpers.clarity.scss 22:11 inputs()
node_modules/@clr/ui/src/forms-deprecated/_variables.forms.scss 48:16 @import
node_modules/@clr/ui/src/utils/_variables.clarity.scss 81:9 @import
node_modules/@clr/ui/src/utils/_dependencies.clarity.scss 42:9 @import
src/styles/styles.scss 4:9 root stylesheet
at tryRunOrWebpackError (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/HookWebpackError.js:88:9)
at __webpack_require_module__ (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4979:12)
at __webpack_require__ (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4936:18)
at /Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:5007:20
at symbolIterator (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/neo-async/async.js:3485:9)
at done (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/neo-async/async.js:3527:9)
at Hook.eval [as callAsync] (eval at create (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/tapable/lib/Hook.js:18:14)
at /Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4914:43
at symbolIterator (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/neo-async/async.js:3482:9)
-- inner error --
Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $string: (((((((((), input[type=text]), input[type=password]), input[type=number]), input[type=email]), input[type=url]), input[type=tel]), input[type=date]), input[type=time]), input[type=datetime-local] is not a string.
╷
22 │ @return quote($inputs);
│ ^^^^^^^^^^^^^^
╵
node_modules/@clr/ui/src/utils/_helpers.clarity.scss 22:11 inputs()
node_modules/@clr/ui/src/forms-deprecated/_variables.forms.scss 48:16 @import
node_modules/@clr/ui/src/utils/_variables.clarity.scss 81:9 @import
node_modules/@clr/ui/src/utils/_dependencies.clarity.scss 42:9 @import
src/styles/styles.scss 4:9 root stylesheet
at Object.<anonymous> (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/k28483/Documents/WORK/MAP/periscope/src/styles/styles.scss:1:7)
at /Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
at Hook.eval [as call] (eval at create (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
at Hook.CALL_DELEGATE [as _call] (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/tapable/lib/Hook.js:14:14)
at /Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4981:39
at tryRunOrWebpackError (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/HookWebpackError.js:83:7)
at __webpack_require_module__ (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4979:12)
at __webpack_require__ (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:4936:18)
at /Users/k28483/Documents/WORK/MAP/periscope/node_modules/webpack/lib/Compilation.js:5007:20
at symbolIterator (/Users/k28483/Documents/WORK/MAP/periscope/node_modules/neo-async/async.js:3485:9)
Generated code for /Users/k28483/Documents/WORK/MAP/periscope/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!/Users/k28483/Documents/WORK/MAP/periscope/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!/Users/k28483/Documents/WORK/MAP/periscope/src/styles/styles.scss
1 | throw new Error("Module build failed (from ./node_modules/sass-loader/dist/cjs.js):\nSassError: $string: (((((((((), input[type=text]), input[type=password]), input[type=number]), input[type=email]), input[type=url]), input[type=tel]), input[type=date]), input[type=time]), input[type=datetime-local] is not a string.\n ╷\n22 │ @return quote($inputs);\n │ ^^^^^^^^^^^^^^\n ╵\n node_modules/@clr/ui/src/utils/_helpers.clarity.scss 22:11 inputs()\n node_modules/@clr/ui/src/forms-deprecated/_variables.forms.scss 48:16 @import\n node_modules/@clr/ui/src/utils/_variables.clarity.scss 81:9 @import\n node_modules/@clr/ui/src/utils/_dependencies.clarity.scss 42:9 @import\n src/styles/styles.scss 4:9 root stylesheet");
The following is my package.json dependencies
"dependencies": {
"@angular-material-components/datetime-picker": "7.0.1",
"@angular-material-components/moment-adapter": "7.0.0",
"@angular/animations": "^13.1.1",
"@angular/cdk": "12.2.13",
"@angular/common": "~13.1.1",
"@angular/compiler": "~13.1.1",
"@angular/core": "~13.1.1",
"@angular/forms": "~13.1.1",
"@angular/material": "12.2.13",
"@angular/material-moment-adapter": "^11.0.2",
"@angular/platform-browser": "~13.1.1",
"@angular/platform-browser-dynamic": "~13.1.1",
"@angular/router": "~13.1.1",
"@cds/core": "5.6.1",
"@clr/angular": "12.0.8",
"@clr/icons": "^0.13.3",
"@clr/ui": "12.0.8",
"@fortawesome/fontawesome-pro": "^5.13.0",
"@webcomponents/custom-elements": "^1.0.0",
"ag-grid-community": "^25.2.0",
"ag-grid-enterprise": "^25.2.0",
"apicache": "^0.2.2",
"body-parser": "~1.10.2",
"check-types": "^11.1.2",
"context-engine-result": "^1.0.6",
"cookie-parser": "~1.3.3",
"core-js": "^2.5.4",
"crypto-js": "^4.0.0",
"debug": "~2.1.1",
"forever": "^0.15.1",
"hammerjs": "^2.0.8",
"highcharts": "9.3.1",
"jade": "~1.9.1",
"jquery": "^3.4.1",
"localforage": "^1.8.1",
"lodash": "^4.16.0",
"moment": "2.15.1",
"moment-timezone": "^0.5.32",
"ngx-mat-select-search": "3.3.3",
"ngx-toastr": "^11.3.3",
"node-sass": "5.0.0",
"object-hash": "^2.0.3",
"pako": "^2.0.2",
"path": "^0.12.7",
"rxjs": "~6.5.3",
"serve-favicon": "~2.2.0",
"tslib": "^2.0.0",
"uuid": "latest",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.1.2",
"@angular/cli": "^13.1.2",
"@angular/compiler-cli": "^13.1.1",
"@angular/language-service": "^13.1.1",
"@types/check-types": "^7.3.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/lodash": "^4.14.149",
"@types/node": "^12.11.1",
"@types/object-hash": "^1.3.3",
"@types/uuid": "^8.3.0",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.9",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.5.4"
}
I have the latest versions of @clr/ui and @clr/angular dependencies. I tried upgrading the node-sass dependency too. Im not sure what is causing this error. Any leads on how I handle this?