node-sass v5.0.0 compilation error
See original GitHub issueDescribe 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
(https://github.com/webpack-contrib/sass-loader/pull/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 https://github.com/webpack-contrib/sass-loader/issues/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
npx create-react-app sass-error-compilation
- cd sass-error-compilation
- yarn add node-sass
- Modify
App.css
toApp.scss
. Change extension in App.js as well. - 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
Issue Analytics
- State:
- Created 3 years ago
- Reactions:73
- Comments:8
Top Results From Across the Web
Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0
Workaround: don't install node-sass 5.0.0 yet (the major version was ... is a Node.js distribution of dart-sass compiled to pure JavaScript.
Read more >Error node-sass version 5 0 0 is incompatible with 4 0 0
scss file to the App component I am getting this error: Failed to compile. ./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5 ...
Read more >node sass version 7.0.0 is incompatible with ^4.0.0. - You.com
I am newbie and working on a reactjs project, now having the error below, can you please help me to solve it? Failed...
Read more >gulp-sass | Yarn - Package Manager
gulp-sass npm package version Build Status Join the chat at https://gitter.im/dlmanning/gulp- Node.js support. Sass plugin for Gulp. Before filing an issue, ...
Read more >Error: 'node-sass' version 5.0.0 is incompatible with ^4.0.0
Installed: React v17.0.1,; node-sass v5.0.0,. Then I tried to import a blank .scss file to the App component: File App.js.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Further to the above, also note that node-sass has been deprecated.
I followed this suggestion and simply replaced
node-sass
withsass
and everything seems to be working fine without any other changes required.It might be a good time to move to sass (dart implementation) instead of libsass/node-sass.