I'm getting the following error when trying to compile my react project after upgrading some npm packages (getting latest and mainly upgrading carbon). I'v been stuck on this and can't seem to find what's wrong but seems sass failing to compile:
The error im getting:
ERROR in ./app/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/fast-sass-loader/lib/index.js??ruleSet[1].rules[2].use[3]!./app/styles/index.scss)
Module build failed (from ./node_modules/fast-sass-loader/lib/index.js):
Error: expected "{".
...
...
app\styles\index.scss 3:392 root stylesheet
at Object.wrapException (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:1247:17)
at SpanScanner.error$3$length$position (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67792:15)
at SpanScanner.expectChar$2$name (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67856:12)
at SpanScanner.expectChar$1 (E:\MyProject.FrontEnd\node_modules\sass\sass.dart.js:67859:19)
Here are my packages in package.json
"dependencies": {
"@babel/core": "7.9.6",
"@babel/helper-compilation-targets": "7.14.5",
"@babel/plugin-proposal-async-generator-functions": "7.14.7",
"@babel/plugin-proposal-class-properties": "7.14.5",
"@babel/plugin-proposal-dynamic-import": "7.14.5",
"@babel/plugin-proposal-json-strings": "7.14.5",
"@babel/plugin-syntax-dynamic-import": "7.8.3",
"@babel/polyfill": "7.8.7",
"@babel/preset-env": "7.9.6",
"@babel/preset-react": "7.9.4",
"@carbon/charts": "^1.5.2",
"@carbon/charts-react": "^1.5.2",
"@carbon/colors": "^11.4.0",
"@carbon/pictograms-react": "^11.31.0",
"@carbon/react": "^1.12.0",
"@carbon/themes": "^11.8.0",
"@carbon/type": "^11.8.0",
"async-lock": "1.3.2",
"autoprefixer": "9.7.6",
"axios": "0.20.0",
"babel-loader": "8.1.0",
"circular-dependency-plugin": "5.2.2",
"classnames": "2.2.6",
"clean-webpack-plugin": "3.0.0",
"core-js": "3.6.5",
"css-loader": "^6.7.1",
"d3": "^7.6.1",
"downloadjs": "1.4.7",
"eslint": "6.8.0",
"eslint-config-google": "0.14.0",
"eslint-loader": "4.0.2",
"fast-async": "7.0.6",
"fast-sass-loader": "^2.0.1",
"file-loader": "6.0.0",
"history": "4.10.1",
"html-webpack-plugin": "5.3.2",
"is_js": "0.9.0",
"jest": "26.1.0",
"jest-editor-support": "27.2.0",
"jest-trx-results-processor": "2.0.3",
"jwt-decode": "2.2.0",
"mini-css-extract-plugin": "1.6.0",
"moment": "2.26.0",
"postcss-custom-properties": "^12.1.8",
"postcss-loader": "^7.0.1",
"process": "0.11.10",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-countdown": "2.3.2",
"react-dom": "16.13.1",
"react-idle-timer": "4.6.4",
"react-input-mask": "2.0.4",
"react-intl": "5.10.0",
"react-jsx-parser": "1.25.1",
"react-redux": "7.2.0",
"react-router-dom": "5.1.2",
"react-sanitized-html": "2.0.0",
"redux": "4.0.5",
"redux-state-sync": "3.1.2",
"sanitize-html": "1.27.4",
"sass": "^1.54.9",
"sass-loader": "^13.0.2",
"style-loader": "1.2.1",
"uuid": "8.3.0",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
}