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"
}
Judging from the errors you provided in the comments, I guess you made a major upgrade of postcss-loader as well. The option plugins was moved to postcssOptions since v4.0.0. You should now write it like this:
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: []
}
}