Błąd: Node Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0

336

Utworzyłem pusty projekt React, używając polecenia: npx create-react-appna npm v7.0.7 i Node v15.0.1

Zainstalowano:

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

Następnie próbowałem zaimportować pusty plik .scss do komponentu aplikacji:

App.js

import './App.scss'

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

export default App;

Zgłoś błąd:

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"
  },
 ...
 
  }
}
JDKot
źródło

Odpowiedzi:

564

TL; DR

  1. npm uninstall node-sass
  2. npm install [email protected]

Lub, jeśli używasz przędzy (domyślnie w nowszych wersjach CRA)

  1. yarn remove node-sass
  2. yarn add [email protected]

Edit2 : sass-loader v10.0.5 naprawia to. Problem polega na tym, że możesz nie używać go jako zależności projektu, ale bardziej jako zależności swoich zależności. CRA używa stałej wersji, blokuje kątowe cli do node-sass v4 i tak dalej.
Zalecenie na razie jest następujące: jeśli instalujesz tylko node-sass, sprawdź poniższe obejście (i uwagę). Jeśli pracujesz nad pustym projektem i możesz zarządzać konfiguracją swojego pakietu internetowego (nie używając CRA lub CLI do tworzenia szkieletu projektu), zainstaluj najnowszy program ładujący sass.


Edycja : ten błąd pochodzi z sass-loader . Występuje niezgodność semver, ponieważ node-sass @latest jest w wersji 5.0.0, a program ładujący sass oczekuje ^ 4.0.0.
W ich repozytorium jest otwarty problem z powiązaną poprawką, którą należy przejrzeć. Do tego czasu zapoznaj się z poniższym rozwiązaniem.


Obejście : nie instaluj jeszcze node-sass 5.0.0 (właśnie wpadła główna wersja).

Odinstaluj node-sass

npm uninstall node-sass

Następnie zainstaluj najnowszą wersję (przed 5.0)

npm install [email protected]


Uwaga: LibSass (stąd również node-sass) jest przestarzały, a dart-sass jest zalecaną implementacją. Możesz sasszamiast tego użyć , która jest dystrybucją węzłów dart-sass skompilowaną do czystego JavaScript. Uważaj jednak:

Uważaj, stosując to podejście. React-scripts używa sass-loader v8, który preferuje node-sass od sass (który ma pewną składnię nieobsługiwaną przez node-sass). Jeśli oba są zainstalowane, a użytkownik pracował z sassem, może to prowadzić do błędów przy kompilacji css

Nicolas Hevia
źródło
6
z jakiegoś powodu yarn add [email protected]jest znacznie szybszy
Tylik Stec
3
Wygląda na to, że właśnie to naprawili na github.com/webpack-contrib/sass-loader/commit/… , więc możesz zainstalować [email protected]
Marcin
3
@TylikStec to kolejny menedżer pakietów, ale nie używaj obu w tym samym projekcie, posiadanie dwóch plików blokujących może powodować problemy z wdrożeniem
Binara Medawatta
14
@marcin to zabawne, że mówisz „oni”, ponieważ osoba, która opublikowała odpowiedź, to ta, która ją naprawiła:]
Benjamin Gruenbaum
1
W zupełnie nowym projekcie React podobnym do OP, mam „node-sass”: „v5.0.0” i „sass-loader”: „^ 10.1.0”, ale problem nadal występuje. Wersja mojego węzła to 15.3.0. Kiedy odinstaluję node-sass i ponownie zainstaluję @ 4.14.1, problem będzie się powtarzał, ponieważ używam Node w wersji 15.3.0, która oczekuje node-sass w wersji 5.0+.
boxcarcoder
32

Odinstaluj node-sass

npm uninstall node-sass

użyj sass przez:

npm install -g sass
npm install --save-dev sass
freeezer98
źródło
4
Uważaj, stosując to podejście. React-scripts używa sass-loader v8, który preferuje node-sass od sass (który ma pewną składnię nie obsługiwaną przez node-sass). Jeśli oba są zainstalowane, a użytkownik pracował z sassem, może to prowadzić do błędów przy kompilacji css.
Nicolas Hevia
1
Uważaj też na instalacje globalne.
Dave Kanter
1
Unikaj instalacji globalnych dla zależności specyficznych dla projektu. Zawsze możesz odwołać się do lokalnej zależności z przykładem npx npx sassw repozytorium projektu.
fengelhardt
Używam węzła v14.15.3 z node-sass 4.14.1 i działa tylko podejście sass. Odinstalowanie i odbudowanie node-sass lub aktualizacja do 5.x nie rozwiązało problemu. Dzięki!
Mike
26

Jedynym powodem, dla którego otrzymujesz taki błąd, jest to, że twoja wersja węzła nie jest kompatybilna z wersją node-sass.

Tak więc, sprawdź dokumentację tutaj: https://www.npmjs.com/package/node-sass

Lub poniższy obrazek pomoże ci, jaka wersja węzła może korzystać z wersji node-sass.

wprowadź opis obrazu tutaj

Na przykład, jeśli używasz węzła w wersji 12 w systemie Windows („być może”), powinieneś zainstalować wersję 4.12 node-sass .

npm install node-sass@4.12

Tak, właśnie tak. Teraz musisz tylko zainstalować wersję node-sass zalecaną przez zespół node-sass z węzłami zainstalowanymi na twoim komputerze.

Titus Sutio Fanpula
źródło
Dzięki takiemu podejściu jesteś zablokowany na v4.x, zamiast mieć najnowszą wersję v4. Na przykład węzeł 12 utknie z 4.12, nawet jeśli obsługuje 4.14. npm update node-sass nie będzie działać, chyba że użyjesz npm install node-sass@^4.12tego samego, co instalacja 4.14.1 (najnowsza znana wersja v4).
Nicolas Hevia
Dziękuję za odpowiedź Nicolas Hevia, ale wypróbowałem ten kod powyżej i masz rację, nie mogę zaktualizować tej wersji node-sass, jeśli używam npm install [email protected]. Ale próbowałem z node-sass 4.14.1 w nodejs 12.18.3 i nie działa. Dlatego zaleciłem użycie wersji zalecanej przez zespół node-sass, a której nie używam ^. Ponieważ zaktualizuje się do najnowszej wersji node-sass 4
Titus Sutio Fanpula
8

Jeśli zdarzy ci się używać CRA z domyślnym yarnmenedżerem pakietów, użyj następującego. Pracował dla mnie.

yarn remove node-sass 
yarn add node-sass@4.14.1
dhanushkac
źródło
1

Ten błąd występuje, gdy wersje NodeJS i Node Sass nie są dopasowane.

możesz rozwiązać problem, wykonując poniższe czynności:

- Krok 1 : Usuń Nodejs z komputera

- Krok 2 : Ponownie zainstaluj Nodejs w wersji 14.15.1.

- Krok 3 : Odinstaluj Node Sass, uruchamiając polecenienpm uninstall node-sass

- Krok 4 : Ponownie zainstaluj Node sass w wersji 4.14.1, uruchamiając polecenienpm install [email protected]

Po wszystkich krokach możesz uruchomić polecenie, ng serve -oaby uruchomić aplikację.

Węzeł Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0.

Dung Do Tien
źródło
0

Jeśli błąd to

Błąd: Node Sass w wersji 5.0.0 jest niezgodny z ^ 4.0.0

Krok 1: zatrzymaj serwer

Krok 2: uruchom polecenia są npm uninstall node-sass

Krok 3: sprawdź, package.jsonczy node-sass jest dostępny w pliku, a następnie ponownie uruchom Krok 2.

Krok 4: npm install [email protected]<=== uruchom polecenie

Krok 5: poczekaj, aż polecenie zostanie pomyślnie uruchomione.

Krok 6: uruchom serwer za pomocą npm start

Nadeem Khan
źródło