158
votes

Erreur: Node Sass version 5.0.0 est incompatible avec ^ 4.0.0

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ée:

Réagissez v17.0.1,
node-sass v5.0.0,

Ensuite, j'ai essayé d'importer un fichier .scss vierge dans le composant App:

App.js

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

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.

package.json

import './App.scss'

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

export default App;

reactjs webpack create-react-app node-sass sass-loader

0 commentaires

4 Réponses :

261
votes

TL; DR

npm uninstall node-sass
npm install node-sass@4.14.1

Ou, si vous utilisez du fil (par défaut dans les versions plus récentes de l'ARC)

yarn remove node-sass
yarn add node-sass@4.14.1

Edit2 : sass-loader v10.0.5 le corrige. Le problème est que vous ne l'utilisez peut-être pas comme une dépendance de 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 l'instant est la suivante: si vous installez simplement 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 la configuration de votre pack Web (sans utiliser CRA ou une CLI pour échafauder votre projet), installez le dernier chargeur sass.

Edit : cette erreur vient de sass-loader . Il y a une discordance semver puisque node-sass @latest est v5.0.0 et sass-loader attend ^ 4.0.0.
Il y a un problème ouvert sur leur référentiel avec un correctif associé qui doit être examiné. En attendant, reportez-vous à la solution ci-dessous.

Solution de contournement : n'installez pas encore node-sass 5.0.0 (la version majeure vient d'être modifiée).

Désinstaller node-sass

npm uninstall node-sass

Ensuite, installez la dernière version (avant 5.0)

npm install node-sass@4.14.1

Remarque: LibSass (donc node-sass également) est obsolète et dart-sass est l'implémentation recommandée. Vous pouvez utiliser sass place , qui est une distribution de nœuds de dart-sass compilée en JavaScript pur. Soyez averti cependant:

Soyez prudent en utilisant cette approche. React-scripts utilise sass-loader v8, qui préfère node-sass à sass (dont la syntaxe n'est pas prise en charge par node-sass). Si les deux sont installés et que l'utilisateur travaille avec sass, cela peut entraîner des erreurs de compilation css

5 commentaires

pour une raison quelconque, yarn add node-sass@4.14.1 est beaucoup plus rapide

On dirait qu'ils viennent de corriger cela dans github.com/webpack-contrib/sass-loader/commit/… , vous pouvez donc installer sass-loader@10.0.5

@TylikStec yarn est un autre gestionnaire de packages, mais n'utilisez pas les deux dans le même projet, le fait d'avoir deux fichiers de verrouillage peut entraîner des problèmes de déploiement

@marcin c'est drôle que vous disiez "ils" puisque la personne qui a posté la réponse est celle qui l'a corrigée:]

yarn remove node-sass et yarn add node-sass@4 ont fait pour moi.

18
votes

Désinstaller node-sass

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

utilisez sass par:

npm uninstall node-sass

2 commentaires

Cela a fonctionné pour moi, merci.

Soyez prudent en utilisant cette approche. React-scripts utilise sass-loader v8, qui préfère node-sass à sass (dont la syntaxe n'est pas prise en charge par node-sass). Si les deux sont installés et que l'utilisateur travaille avec sass, cela peut entraîner des erreurs de compilation css.

12
votes

La seule raison pour laquelle vous obtenez une erreur comme celle-ci, c'est parce que votre version de nœud n'est pas compatible avec votre version de nœud-sass.

Assurez-vous donc de consulter la documentation ici: https://www.npmjs.com/package/node-sass

Ou cette image ci-dessous vous aidera, ce que la version du nœud peut utiliser la version node-sass.

Par exemple, si vous utilisez la version 12 de node sur vos fenêtres ("peut-être"), alors vous devriez avoir à installer la version 4.12 de node-sass .

npm install node-sass@4.12

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

2 commentaires

Avec cette approche, vous êtes verrouillé sur la v4.x, au lieu d'avoir la dernière version de la v4. Par exemple, le nœud 12 serait bloqué avec 4.12 même s'il prend en charge 4.14. npm update node-sass ne fonctionnerait pas à moins que vous n'utilisiez npm install node-sass@^4.12 qui est identique à l'installation de 4.14.1 (dernière version connue de v4).

Merci pour votre réponse Nicolas Hevia, mais j'ai essayé ce code ci-dessus et vous avez raison, il ne peut pas mettre à jour cette version de node-sass si j'utilise npm install node-sass@4.12 . Mais j'ai essayé avec node-sass 4.14.1 dans nodejs 12.18.3 et cela ne fonctionne pas. C'est pourquoi j'ai recommandé d'utiliser la version recommandée par l'équipe node-sass et je ne l'utilise pas ^ . Parce qu'il mettra à jour vers la dernière version de node-sass 4

4
votes

Si vous utilisez CRA avec le gestionnaire de paquets de yarn par défaut, utilisez ce qui suit. A travaillé pour moi.

yarn remove node-sass 
yarn add node-sass@4.14.1

0 commentaires