Update sass-loader to v10.0.5 or newer for use node-sass v5.0.0

Describe the bug

create-react-app is using sass-loader: 8.0.2 in this version sass-loader does not allow to use node-sass higher versions, it has to be v4 only. So please update it. In sass-loader v10.0.5 is fixed.

https://github.com/webpack-contrib/sass-loader/issues/898

https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

node-sass

Environment

Windows 10 Pro npm v10.23.0 node-sass v5.0.0 react-scripts v4.0.1

Environment Info:

current version of create-react-app: 4.0.1 running from C:\Users\tomec\AppData\Roaming\npm-cache_npx\3252\node_modules\create-react-app

System: OS: Windows 10 10.0.19042 CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor Binaries: Node: 10.23.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.423.0), Chromium (87.0.664.66) Internet Explorer: 11.0.19041.1 npmPackages: react: ^17.0.1 => 17.0.1 react-dom: ^17.0.1 => 17.0.1 react-scripts: ^4.0.1 => 4.0.1 npmGlobalPackages: create-react-app: Not Found

Steps to reproduce

1. npx create-react-app hi
2. npm install node-sass
3. update files from css to sass
4. npm start

Expected behavior

SASS files should compile

Actual behavior

Reproducible demo

1. npx create-react-app hi
2. npm install node-sass
3. rename App.css to App.scss and Index.css to Index.sass
4. update in app.js App.css call to App.sass and in index.js Index.css to Index.sass
5. npm start

[junkaiii]

I noticed the version has already been bumped to 10.0.5 in the repo but when pulling the react-scripts package, the package.json still reflects the older version. Would someone release a patch version for the package?

[Xopsy]

I don’t recommend this solution, but in the meantime they will release a new patch for react-scripts, i did these steps after installing all node modules packages.

1. Check if sass-loader into node_modules is equal at 8.0.2, if equal follow next step, else and it is version 10.0.5 you don’t have to do anything more
2. remove sass-loader folder from node_modules
3. Go to node_modules/react-scripts/package.json, and change “sass-loader” to “10.0.5”
4. Delete package-lock.json
5. Go to your terminal/console and run npm install

After this you should have a new folder node_modules/sass-loader with version 10.0.5, and it will solve the issue above

Node Sass version 5.0.0 is incompatible with ^4.0.0.