node-sass v5.0.0 compilation error

[nhevia]

Describe the bug

Installing node-sass as recommended in the documentation to have SASS support returns following error on compilation:

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

sass-loader was updated to v10.0.5 for supporting node-sass v5.0.0 (webpack-contrib/sass-loader#899), but react-scripts is pinned to sass-loader 8.0.0. This means that every fresh installation (or update) which is using node-sass will end up with this error on yarn/npm start.

Related issue threads:
https://stackoverflow.com/a/64626556/6402990
webpack-contrib/sass-loader#898

Did you try recovering your dependencies?

Not applicable

Which terms did you search for in User Guide?

Not applicable

Environment

All

Steps to reproduce

1. npx create-react-app sass-error-compilation
2. cd sass-error-compilation
3. yarn add node-sass
4. Modify App.css to App.scss. Change extension in App.js as well.
5. yarn start

Expected behavior

Scss files compiled to css without sass-loader returning an error.

Actual behavior

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

Reproducible demo

[nhevia]

It might be a good time to move to sass (dart implementation) instead of libsass/node-sass.

[cduff]

It might be a good time to move to sass (dart implementation) instead of libsass/node-sass.

Further to the above, also note that node-sass has been deprecated.

I followed this suggestion and simply replaced node-sass with sass and everything seems to be working fine without any other changes required.

npm uninstall node-sass
npm i sass

[iamkennis]

how i resolve this issues :

1. I update my computer node version to 14
2. And download the Supported node-sass version check here for your computer supported node version

[Powersource]

Does this essentially mean that CRA doesn't support node 15?

[nhevia]

I followed this suggestion and simply replaced node-sass with sass and everything seems to be working fine without any other changes required.

npm uninstall node-sass
npm i sass

Be careful with that approach #10045