Error Node Sass version 5 0 0 is incompatible with 4 0 0

Question

I ve created a blank React project  using the command  npx create-react-app on npm v7 0 7 and Node v15 0 1 Installed   React v17 0 1  node-sass v5 0 0   Then I tried to import blank  scss file to App component  App js import    App scss   function App       return        lt div className  quot App quot  gt        App      lt  div gt          export default App   Throw an Error  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 s ass-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   package json      quot name quot    quot react-17-node-sass-5 quot      quot version quot    quot 0 1 0 quot      quot private quot   true     quot dependencies quot          quot  testing-library jest-dom quot    quot  5 11 5 quot        quot  testing-library react quot    quot  11 1 0 quot        quot  testing-library user-event quot    quot  12 1 10 quot        quot node-sass quot    quot  5 0 0 quot        quot react quot    quot  17 0 1 quot        quot react-dom quot    quot  17 0 1 quot        quot react-scripts quot    quot 4 0 0 quot        quot web-vitals quot    quot  0 2 4 quot

User · Accepted Answer

TL DR  npm uninstall node-sass npm install node-sass 4 14 1  Or  if using yarn  default in newer CRA versions   yarn remove node-sass yarn add node-sass 4 14 1   Edit2  sass-loader v10 0 5 fixes it  Problem is  you might not be using it as a project dependency  but more as a dependency of your dependencies  CRA uses a fixed version  angular-cli locks to node-sass v4 an so on  The recommendation for now is  if you re installing just node-sass check below workaround  and the note   If you re working on a blank project and you can manage your webpack configuration  not using CRA or a CLI to scaffold your project  install latest sass-loader   Edit  this error comes from sass-loader  There is a semver mismatch since node-sass  latest is v5 0 0 and sass-loader expects  4 0 0  There is an open issue on their repository with an associated fix that needs to be reviewed  Until then  refer to the solution below   Workaround  don t install node-sass 5 0 0 yet  major version was just bumped   Uninstall node-sass npm uninstall node-sass Then install the latest version  before 5 0  npm install node-sass 4 14 1  Note  LibSass  hence node-sass as well  is deprecated and dart-sass is the recommended implementation  You can use sass instead  which is a node distribution of dart-sass compiled to pure JavaScript  Be warned though   Be careful using this approach  React-scripts uses sass-loader v8  which prefers node-sass to sass  which has some syntax not supported by node-sass   If both are installed and the user worked with sass  this could lead to errors on css compilation

User · Answer

If you happen to use CRA with default yarn package manager use the following  Worked for me  yarn remove node-sass  yarn add node-sass 4 14 1

User · Answer

Uninstall node-sass npm uninstall node-sass  use sass by  npm install -g sass npm install --save-dev sass

User · Answer

The only one reason why you get some error like that  it s because your node version is not compatible with your node-sass version  So  make sure to checkout the documentation at here  https   www npmjs com package node-sass Or this image below will be help you  what the node version can use the node-sass version   For an example  if you re using node version 12 on your windows   quot maybe quot    then you should have to install the node-sass version 4 12  npm install node-sass 4 12  Yeah  like that  So now you only need to install the node-sass version recommended by the node-sass team with the nodes installed on your computer

User · Answer

It worked for me after adding  particular version of node-sass package  node-sass 4 14 1

User · Answer

This error occurs when versions of NodeJS and  Node Sass are not matched  you can resolve your issue by doing as below  - Step 1  Remove Nodejs from your computer - Step 2  Reinstall Nodejs version 14 15 1  - Step 3  Uninstall Node sass by run the command npm uninstall node-sass - Step 4  Reinstall Node sass version 4 14 1 by run the command npm install node-sass 4 14 1 After all steps  you can run command ng serve -o to run your application  Node sass version 5 0 0 is incompatible with  4 0 0

User · Answer

This is version problem  install the right dependant version npm uninstall node-sass npm install node-sass 4 14 1

User · Answer

If the error is  Error  Node Sass version 5 0 0 is incompatible with  4 0 0  Step1  stop the server Step2  run commands are npm uninstall node-sass Step3  check node-sass in package json if node-sass is available in the file then again run Step2  Step4  npm install node-sass 4 14 1  lt     run command Step5  wait until the command successfully runs  Step6  start-server using npm start

User · Answer

Small update  Incase if you get below error in regard to node-sass follow the steps given below   code EPERM npm ERR  syscall unlink  steps to solve the issue   close visual studio manually remove  node-sass DELETE from node modules open visual studio npm cache verify npm install node-sass 4 14 1

[reactjs] Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

Examples related to reactjs

Examples related to webpack

Examples related to sass

Examples related to create-react-app

Examples related to node-sass