Erreur : Node Sass version 5.0.0 est incompatible avec ^4.0.0

Question

J'ai créé un projet React vierge, en utilisant la commande : npx create-react-app sur npm v7.0.7 et Node v15.0.1

Installé :

• React v17.0.1,
• node-sass v5.0.0,

J'ai ensuite essayé d'importer un fichier .scss vierge dans le composant App :

App.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

Lancer une erreur :

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.

paquet.json

{
  "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"
  },
 ...

  }
}

Answer 1

TL;DR

1. npm uninstall node-sass
2. npm install node-sass@4.14.1

Ou, si vous utilisez yarn (par défaut dans les nouvelles versions de CRA)

1. yarn remove node-sass
2. yarn add node-sass@4.14.1

---

Edit2 : sass-loader v10.0.5 le répare. Le problème est que vous ne l'utilisez peut-être pas comme une dépendance du projet, mais plutôt comme une dépendance de vos dépendances. CRA utilise une version fixe, angular-cli se verrouille sur node-sass v4 et ainsi de suite.
La recommandation pour le moment est la suivante : si vous installez uniquement node-sass, vérifiez la solution de contournement ci-dessous (et la note). Si vous travaillez sur un projet vierge et que vous pouvez gérer votre configuration webpack (sans utiliser CRA ou une CLI pour échafauder votre projet), installez la dernière version de sass-loader.

---

Modifier sass-loader . Il y a un décalage entre les semver puisque node-sass @latest est v5.0.0 et sass-loader s'attend à ^4.0.0.
Il y a un problème ouvert sur leur dépôt avec un correctif associé qui doit être examiné. En attendant, reportez-vous à la solution ci-dessous.

---

Solution de rechange : n'installez pas encore node-sass 5.0.0 (la version majeure vient d'être mise à jour).

Désinstaller node-sass

npm uninstall node-sass

Puis installez la dernière version (avant 5.0)

npm install node-sass@4.14.1

---

Remarque : LibSass (et donc node-sass également) est déprécié et dart-sass est l'implémentation recommandée. Vous pouvez utiliser sass au lieu de qui est une distribution node de dart-sass compilé en pur JavaScript. Soyez cependant prévenu :

Soyez prudent en utilisant cette approche. React-scripts utilise sass-loader v8, qui préfère node-sass à sass (qui a une syntaxe non supportée par node-sass). Si les deux sont installés et que l'utilisateur a travaillé avec sass, cela peut entraîner des erreurs lors de la compilation des css.

Answer 2

La seule raison pour laquelle vous obtenez une erreur comme celle-là, c'est que votre version de node n'est pas compatible avec votre version de node-sass.

Veillez donc à consulter la documentation ici : https://www.npmjs.com/package/node-sass

Ou cette image ci-dessous vous aidera, quelle version de node peut utiliser la version de node-sass.

Par exemple, si vous utilisez nœud version 12 sur votre Windows (" peut-être "), alors vous devriez installer le node-sass version 4.12 .

npm install node-sass@4.12

Oui, comme ça. Il ne vous reste donc plus qu'à installer la version de node-sass recommandée par l'équipe de node-sass avec les nœuds installés sur votre ordinateur.

Answer 3

Désinstaller node-sass

npm uninstall node-sass

utiliser sass par :

npm install -g sass
npm install --save-dev sass

Answer 4

node-sass alias LibSass est officiellement déprécié à partir du 26 octobre 2020 et vous devriez plutôt utiliser sass alias Dart Sass .

Pour npm que vous pourriez faire :

npm uninstall node-sass
npm install sass --save-dev

Pour yarn faire :

yarn remove node-sass
yarn add sass

Answer 5

La meilleure solution pour moi a été de désinstaller node sass.

npm uninstall node-sass

puis installez sass npm install sass

pour ceux qui utilisent du fil

 yarn remove node-sass
 yarn add sass