Fehler: Node Sass Version 5.0.0 ist nicht kompatibel mit ^ 4.0.0

126

Ich habe ein leeres React-Projekt mit dem folgenden Befehl erstellt: npx create-react-appon npm v7.0.7 und Node v15.0.1

Eingerichtet:

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

Dann habe ich versucht, eine leere .scss-Datei in die App-Komponente zu importieren:

App.js.

import './App.scss'

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

export default App;

Wirf einen Fehler:

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

{
  "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"
  },
 ...
 
  }
}
reactjs  webpack  create-react-app  node-sass  sass-loader 
— JDKot
quelle

Antworten:

204

TL; DR

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

Edit2 : sass-loader v10.0.5 behebt das Problem . Das Problem ist, dass Sie es möglicherweise nicht als Projektabhängigkeit verwenden, sondern eher als Abhängigkeit Ihrer Abhängigkeiten. CRA verwendet eine feste Version, Angular-Cli-Sperren für Node-Sass v4 usw.
Die Empfehlung für den Moment lautet: Wenn Sie nur Node-Sass installieren, überprüfen Sie die folgende Problemumgehung (und den Hinweis). Wenn Sie an einem leeren Projekt arbeiten und Ihre Webpack-Konfiguration verwalten können (ohne CRA oder CLI als Gerüst für Ihr Projekt), installieren Sie den neuesten Sass-Loader.

Bearbeiten : Dieser Fehler kommt vom Sass-Loader . Es gibt eine Semver-Nichtübereinstimmung, da node-sass @latest v5.0.0 ist und sass-loader ^ 4.0.0 erwartet.
In ihrem Repository gibt es ein offenes Problem mit einem zugehörigen Fix, der überprüft werden muss. Beziehen Sie sich bis dahin auf die folgende Lösung.

Problemumgehung : Installieren Sie Node-Sass 5.0.0 noch nicht (Hauptversion wurde gerade gestoßen).

Deinstallieren Sie node-sass

npm uninstall node-sass

Installieren Sie dann die neueste Version (vor 5.0)

npm install node-sass@4.14.1

Hinweis: LibSass (daher auch Node-Sass) ist veraltet und Dart-Sass ist die empfohlene Implementierung. Sie können sassstattdessen eine Knotenverteilung von Dart-Sass verwenden, die zu reinem JavaScript kompiliert wurde. Seien Sie jedoch gewarnt:

Seien Sie vorsichtig mit diesem Ansatz. React-Skripte verwenden Sass-Loader v8, der Node-Sass gegenüber Sass bevorzugt (dessen Syntax von Node-Sass nicht unterstützt wird). Wenn beide installiert sind und der Benutzer mit sass gearbeitet hat, kann dies zu Fehlern bei der CSS-Kompilierung führen

— Nicolas Hevia
quelle
3
aus irgendeinem Grund yarn add node-sass@4.14.1ist viel schneller
— Tylik Stec
1
Sieht so aus, als hätten sie das gerade in github.com/webpack-contrib/sass-loader/commit/… behoben , sodass Sie sass-loader@10.0.5
— Marcin
1
@TylikStec Garn ist ein weiterer Paketmanager, verwendet jedoch nicht beide im selben Projekt.
— Wenn
5
@marcin es ist lustig, dass du "sie" sagst, da die Person, die die Antwort gepostet hat, diejenige ist, die sie behoben hat:]
— Benjamin Gruenbaum
Ich arbeite für mich an Gatsby. Vielen Dank!
— Diego Fortes
10

Deinstallieren Sie node-sass

npm uninstall node-sass

benutze sass von:

npm install -g sass
npm install --save-dev sass
— freeezer98
quelle
Das hat bei mir funktioniert, danke.
— dro3333
Seien Sie vorsichtig mit diesem Ansatz. React-Skripte verwenden Sass-Loader v8, der Node-Sass gegenüber Sass bevorzugt (dessen Syntax von Node-Sass nicht unterstützt wird). Wenn beide installiert sind und der Benutzer mit sass gearbeitet hat, kann dies zu Fehlern bei der CSS-Kompilierung führen.
— Nicolas Hevia
4

Der einzige Grund, warum Sie einen solchen Fehler erhalten, ist, dass Ihre Knotenversion nicht mit Ihrer Node-Sass-Version kompatibel ist.

Lesen Sie daher die Dokumentation hier: https://www.npmjs.com/package/node-sass

Oder dieses Bild unten hilft Ihnen, welche Knotenversion die Node-Sass-Version verwenden kann.

Geben Sie hier die Bildbeschreibung ein

Wenn Sie beispielsweise Node Version 12 unter Windows verwenden ("vielleicht"), müssen Sie die Node-Sass-Version 4.12 installieren .

npm install node-sass@4.12

Genau so. Jetzt müssen Sie nur noch die vom Node-Sass-Team empfohlene Node-Sass-Version mit den auf Ihrem Computer installierten Knoten installieren.

— Titus Sutio Fanpula
quelle
Mit diesem Ansatz sind Sie an v4.x gebunden, anstatt die neueste Version von v4 zu haben. Zum Beispiel würde Knoten 12 mit 4.12 stecken bleiben, selbst wenn er 4.14 unterstützt. Das npm-Update node-sass würde nur funktionieren, wenn Sie es verwendet haben. npm install node-sass@^4.12Dies entspricht der Installation von 4.14.1 (neueste bekannte Version von Version 4).
— Nicolas Hevia
Vielen Dank für Ihre Antwort, Nicolas Hevia, aber ich habe diesen Code oben ausprobiert und Sie haben Recht, er kann diese Version von Node-Sass nicht aktualisieren, wenn ich sie verwende npm install node-sass@4.12. Aber ich habe es mit Node-Sass 4.14.1 in NodeJS 12.18.3 versucht und es funktioniert nicht. Aus diesem Grund habe ich empfohlen, die Version zu verwenden, die das Node-Sass-Team empfohlen hat, und ich verwende sie nicht ^. Weil es auf die neueste Version von Node-Sass 4 aktualisiert wird
— Titus Sutio Fanpula
1

Wenn Sie CRA mit dem Standardpaketmanager yarnverwenden, gehen Sie wie folgt vor. Hat für mich gearbeitet.

yarn remove node-sass 
yarn add node-sass@4.14.1
— Dhanushkac
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.