Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0

TL;DR

  1. npm uninstall node-sass
  2. npm install [email protected]

Or, if using Yarn (default in newer CRA versions)

  1. yarn remove node-sass
  2. yarn add [email protected]

Edit2: sass-loader v10.0.5 fixes it. The 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, and so on.

The recommendation for now is: if you’re installing just node-sass, check the 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 the latest sass-loader.

Edit: this error comes from sass-loader. There is a semantic versioning 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 (the major version was just bumped).

Uninstall node-sass

npm uninstall node-sass

Then install the latest version (before 5.0)

npm install [email protected]

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.js 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

Related Posts:

  1. What does this “react-scripts eject” command do?
  2. How To Add My Own Svg Image Just Like Logo Is Shown By Default In Create-React-App
  3. How to fix missing dependency warning when using useEffect React Hook
  4. What exactly is the ‘react-scripts start’ command?
  5. How to include bootstrap css and js in reactjs app?
  6. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  7. webpackJsonp is not defined
  8. where is create-react-app webpack config and files?
  9. What is localhost 3000?
  10. What is localhost 3000?
  11. MenuIcon not found in material-ui/icons
  12. Error : Cannot read property ‘map’ of undefined
  13. Error : Cannot read property ‘map’ of undefined
  14. When to use componentWillReceiveProps lifecycle method?
  15. How do I reference a local image in React?
  16. What is mapDispatchToProps?
  17. How to use clsx in React
  18. How to use clsx in React
  19. NPM Start not starting local server
  20. how to delete a single item using axios in react
  21. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  22. Console.log() isn’t logging in ReactJS
  23. Reactjs this.setState is not a function error
  24. Axios having CORS issue
  25. When to use React setState callback
  26. npm ERR! code UNABLE_TO_GET_ISSUER_CERT_LOCALLY
  27. Adding an .env file to React Project
  28. react-scripts: command not found
  29. Component definition is missing display name react/display-name
  30. What is withRouter for in react-router-dom?
  31. How to import image (.svg, .png ) in a React Component
  32. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  33. React Uncaught Error: Target container is not a DOM element [duplicate]
  34. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  35. React – expressions must have one parent element?
  36. Can you force a React component to rerender without calling setState?
  37. Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
  38. Is using async componentDidMount() good?
  39. Inserting the iframe into react component
  40. Cannot find module ‘@babel/core’
  41. How to use callback with useState hook in react
  42. How to use callback with useState hook in react
  43. How to resolve “Cannot use import statement outside a module” in jest
  44. How to use switch statement inside a React component?
  45. How to use onClick event on react Link component?
  46. forEach() in React JSX does not output any HTML
  47. Scroll to the top of the page after render in react.js
  48. What does “isomorphic React” mean?
  49. axios post request to send form data
  50. Trying to use fetch and pass in mode: no-cors
  51. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  52. How to declare a global variable in React?
  53. How to use onload in react?
  54. Why am I getting Warning: Functions are not valid as a React child?
  55. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  56. Entrypoint undefined = index.html using HtmlWebpackPlugin
  57. What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
  58. how to use react require syntax?
  59. How to set a default value in react-select
  60. Invalid Host Header when ngrok tries to connect to React dev server
  61. ReactNative: how to center text?
  62. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  63. Invariant Violation: Could not find “store” in either the context or props of “Connect(SportsDatabase)”
  64. react-router vs react-router-dom, when to use one or the other?
  65. React Props is Not Defined
  66. ReactJs CreateClass is not a function
  67. onKeyDown event not working on divs in React
  68. React.createElement: type is invalid — expected a string
  69. Read the current full URL with React?
  70. ‘React’ must be in scope when using JSX react/react-in-jsx-scope?
  71. Show or hide element in React
  72. React statics with ES6 classes
  73. componentDidMount() not being called when react component is mounted
  74. Invariant Violation: Objects are not valid as a React child
  75. Understanding unique keys for array children in React.js
  76. Difference between npx and npm?
  77. Loop inside React JSX
  78. Can’t resolve module (not found) in React.js
  79. Webpack – Critical dependency: the request of a dependency is an expression
  80. How to pass props to {this.props.children}
  81. How to refresh a Page using react-route Link
  82. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  83. module.exports “Module is not defined”
  84. React’s setState method with prevState argument
  85. Async/await in componentDidMount to load in correct order
  86. React Checkbox not sending onChange
  87. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  88. Can’t perform a React state update on an unmounted component
  89. This.props.dispatch not a function – React-Redux
  90. React router not showing browser history
  91. How to get parameter value from query string?
  92. Uncaught ReferenceError: React is not defined
  93. Webpack – webpack-dev-server: command not found
  94. apache cpu over 70% on localhost
  95. Underscore – Self hosted fonts
  96. Force Code (Appearance) Editor to Use Spaces Not Tabs
  97. How to style bootstrap container in wordpress theme?
  98. underscores theme – sass folder structure vs smacss
  99. Correct way of Enqueue self hosted fonts in sass project
  100. Custom CSS Not working on Product page

Leave a Comment