{"id":139,"hash":"a6ac9762b5c79bbb6f99ac2995539eec9f22409c965aab102f31b6c7a876a9cc","pattern":"Error: &#39;node-sass&#39; version 5.0.0 is incompatible with ^4.0.0","full_message":"I've created a blank React project, using the command: npx create-react-app on npm v7.0.7 and Node.js v15.0.1\n\nInstalled:\n\nReact v17.0.1,\nnode-sass v5.0.0,\n\nThen I tried to import a blank .scss file to the App component:\n\nFile App.js\nimport './App.scss'\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      App\n    </div>\n  );\n}\n\nexport default App;\n\nIt throws an error:\n\nFailed to compile.\n\n./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\nass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)\nError: Node Sass version 5.0.0 is incompatible with ^4.0.0.\n\nFile package.json\n{\n  \"name\": \"react-17-node-sass-5\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^5.11.5\",\n    \"@testing-library/react\": \"^11.1.0\",\n    \"@testing-library/user-event\": \"^12.1.10\",\n    \"node-sass\": \"^5.0.0\",\n    \"react\": \"^17.0.1\",\n    \"react-dom\": \"^17.0.1\",\n    \"react-scripts\": \"4.0.0\",\n    \"web-vitals\": \"^0.2.4\"\n  },\n ...\n\n  }\n}","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"TL;DR\n\nnpm uninstall node-sass\nnpm install sass\n\nOr, if using Yarn\n\nyarn remove node-sass\nyarn add sass\n\nEdit3: yes, another edit. Moving to sass (dart-sass) is the best solution. Previous one included locking node-sass to version 4.x.x, which is 2 years old and lacks newer SCSS features.\n\nEdit2: 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.\n\nThe 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.\n\nEdit: 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.\n\nThere is an open issue on their repository with an associated fix that needs to be reviewed. Until then, refer to the solution below.\n\nWorkaround: don't install node-sass 5.0.0 yet (the major version was just bumped).\n\nUninstall node-sass\n\nnpm uninstall node-sass\n\nThen install the latest version (before 5.0)\n\nnpm install node-sass@4.14.1\n\nNote: 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.","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/64625050/error-node-sass-version-5-0-0-is-incompatible-with-4-0-0","votes":665,"created_at":"2026-04-19T04:41:23.141790+00:00","updated_at":"2026-04-19T04:51:08.336978+00:00"}