. Advertisement .
..3..
. Advertisement .
..4..
I get the error: Node Sass version 5.0.0 is incompatible with ^4.0.0 when I try to run the program below:
import './App.scss'
function App() {
return (
<div className="App">
App
</div>
);
}
export default App;{
"name": "react-17-node-sass-5",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4"
},
...
}
}The error appears the system notifies as follows:
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.I tried to solve it with another sample. I got the reference in the community forum, but it still returned an invalid result. If someone knows the solution, please give me the support. Thanks!
The cause:
sassloader is the cause of this error. Node-sass @latest is v5.0.0 but sass-loader expects 4.0.0, so there is a semantic-versioning mismatch.
Another reason is that their repository has an open issue with an associated fix. This needs to be addressed.
Solution
Don’t install node.sass 5.0.0 because the major version just got bumped.
Uninstall node -sass
Then we have to install the most recent version (previously 5.0).
Notice: LibSass and node-sass are no longer required. Therefore, dart-sass is recommended. You may use
sassinstead. This is a Node.js distribution for dart-sass compiled in pure JavaScript.sass-loader v10.0.5 also can fix it, but you can not use it as a project dependency, you only use it as a dependency of your dependencies. A fixed version, angular-cli locks to node-sass v4,… are used in CRA. If you only installed node-sass, let’s check the above solution. If you are working on a empty project and your Webpack configuration can be managed ( note that not using CRA or a CLI to scaffold your project), let’s set up the newest sass-loader.
Another solution is moving to sass (dart-sass). Previous version consists of locking node-sass to version 4.x.x, it is 2 years old and lacks of new SCSS features.
Your Node.js version may not be compatible with your Node.sass version.
Also, be sure to check the documentation at node–sass.
This image will help you decide which Node.js version is compatible with the node.sass version.
If you are using Node.js 12 on Windows (“maybe”) then you will need to install node.sass 4.12.
Yes, that’s right. Now you just need to install the Node.js version recommended by node.sass with the Node.js version installed.