Dart-Sass Compilation Issue in React

Question

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"

}

@Arkellys it's a short file that imports several other larger scss files. However i'm pretty sure that it's not a syntax or any related error in the scss files. I tried elminating them one-by-one in several random orders, and no matter what i do, it will still give me a similar "expected" error. — ZiggY, Sep 12 '22 at 19:39
And if you remove all of the imports, do you still have the error? — Arkellys, Sep 12 '22 at 19:40
Yes... for some reason, the error still points to the file with the error: 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/postcss-loader/dist/cjs.js): ValidationError: Invalid options object. PostCSS Loader has been initialized using an options object that does not match the API schema. — ZiggY, Sep 12 '22 at 20:41
- options has an unknown property 'plugins'. These properties are valid: object { postcssOptions?, execute?, sourceMap?, implementation? } at validate (E:\MyProject.FrontEnd\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11) at Object.getOptions (E:\MyProject.FrontEnd\node_modules\webpack\lib\NormalModule.js:585:19) at Object.loader (E:\MyProject.FrontEnd\node_modules\postcss-loader\dist\index.js:38:24) — ZiggY, Sep 12 '22 at 20:41
There you have the true error: `PostCSS Loader has been initialized using an options object that does not match the API schema.` — Arkellys, Sep 12 '22 at 20:43

score 2 · Accepted Answer · answered Sep 12 '22 at 20:56

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: []
  }
}

Dart-Sass Compilation Issue in React

1 Answers1