Kesalahan: Node Sass versi 5.0.0 tidak kompatibel dengan ^ 4.0.0

320

Saya telah membuat proyek React kosong, menggunakan perintah: npx create-react-app pada npm v7.0.7 dan Node v15.0.1

Dipasang:

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

Kemudian saya mencoba mengimpor file .scss kosong ke komponen App:

App.js

import './App.scss'

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

export default App;

Lempar Kesalahan:

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
sumber

Jawaban:

537

TL; DR

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

Atau, jika menggunakan benang (default dalam versi CRA yang lebih baru)

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

Edit2 : sass-loader v10.0.5 memperbaikinya. Masalahnya adalah, Anda mungkin tidak menggunakannya sebagai ketergantungan proyek, tetapi lebih sebagai ketergantungan dari ketergantungan Anda. CRA menggunakan versi tetap, kunci angular-cli ke node-sass v4 dan seterusnya.
Rekomendasi untuk saat ini adalah: jika Anda menginstal hanya node-sass, periksa solusi di bawah ini (dan catatan). Jika Anda sedang mengerjakan proyek kosong dan Anda dapat mengelola konfigurasi webpack Anda (tidak menggunakan CRA atau CLI untuk merancang proyek Anda), instal sass-loader terbaru.

Edit : kesalahan ini berasal dari sass-loader . Ada sedikit ketidakcocokan karena node-sass @latest adalah v5.0.0 dan sass-loader mengharapkan ^ 4.0.0.
Ada masalah terbuka di repositori mereka dengan perbaikan terkait yang perlu ditinjau. Sampai saat itu, lihat solusi di bawah.

Solusi : jangan instal node-sass 5.0.0 dulu (versi utama baru saja diubah).

Copot pemasangan node-sass

npm uninstall node-sass

Kemudian instal versi terbaru (sebelum 5.0)

npm install node-sass@4.14.1

Catatan: LibSass (karenanya node-sass juga) tidak digunakan lagi dan dart-sass adalah implementasi yang direkomendasikan. Sebagai gantinya , Anda dapat menggunakansass , yang merupakan distribusi node dart-sass yang dikompilasi ke JavaScript murni. Berhati-hatilah:

Berhati-hatilah saat menggunakan pendekatan ini. React-scripts menggunakan sass-loader v8, yang lebih memilih node-sass daripada sass (yang memiliki beberapa sintaks yang tidak didukung oleh node-sass). Jika keduanya diinstal dan pengguna bekerja dengan sass, ini dapat menyebabkan kesalahan pada kompilasi css

— Nicolas Hevia
sumber
6
untuk beberapa alasan yarn add node-sass@4.14.1jauh lebih cepat
— Tylik Stec
3
Sepertinya mereka baru saja memperbaikinya di github.com/webpack-contrib/sass-loader/commit/… , jadi Anda dapat menginstal sass-loader@10.0.5
— Marcin
2
Benang @TylikStec adalah manajer paket lain, tetapi jangan gunakan keduanya dalam proyek yang sama, memiliki dua file kunci dapat menyebabkan masalah dalam penerapan
— Binara Medawatta
13
@marcin lucu sekali Anda mengatakan "mereka" karena orang yang memposting jawabannya adalah orang yang memperbaikinya:]
— Benjamin Gruenbaum
yarn remove node-sassdan yarn add node-sass@4melakukannya untuk saya.
— RonquilloAeon
31

Copot pemasangan node-sass

npm uninstall node-sass

gunakan sass oleh:

npm install -g sass
npm install --save-dev sass
— freeezer98
sumber
4
Berhati-hatilah saat menggunakan pendekatan ini. React-scripts menggunakan sass-loader v8, yang lebih memilih node-sass daripada sass (yang memiliki beberapa sintaks yang tidak didukung oleh node-sass). Jika keduanya diinstal dan pengguna bekerja dengan sass, ini dapat menyebabkan kesalahan pada kompilasi css.
— Nicolas Hevia
1
Dan juga, berhati-hatilah dengan penginstalan global.
— Dave Kanter
1
Hindari penginstalan global untuk dependensi khusus proyek. Anda selalu dapat mereferensikan dependensi lokal dengan contoh npx npx sasssaat berada dalam repo proyek.
— fengelhardt
Saya menggunakan node v14.15.3 dengan node-sass 4.14.1 dan hanya pendekatan sass yang berfungsi. Menghapus instalasi dan membangun kembali node-sass atau memutakhirkannya ke 5.x tidak menyelesaikan masalah. Terima kasih!
— Mike
26

Satu-satunya alasan mengapa Anda mendapatkan kesalahan seperti itu, itu karena versi node Anda tidak kompatibel dengan versi node-sass Anda.

Jadi, pastikan untuk memeriksa dokumentasi di sini: https://www.npmjs.com/package/node-sass

Atau gambar di bawah ini akan membantu Anda, versi node apa yang bisa menggunakan versi node-sass.

masukkan deskripsi gambar di sini

Misalnya, jika Anda menggunakan node versi 12 di jendela Anda ("mungkin"), Anda harus menginstal node-sass versi 4.12 .

npm install node-sass@4.12

Ya, seperti itu. Jadi sekarang Anda hanya perlu menginstal versi node-sass yang direkomendasikan oleh tim node-sass dengan node yang diinstal di komputer Anda.

— Titus Sutio Fanpula
sumber
Dengan pendekatan ini Anda dikunci ke v4.x, alih-alih memiliki versi terbaru v4. Misalnya node 12 akan macet dengan 4.12 meskipun mendukung 4.14. npm update node-sass tidak akan berfungsi kecuali Anda menggunakan npm install node-sass@^4.12yang sama dengan menginstal 4.14.1 (versi v4 terbaru yang diketahui).
— Nicolas Hevia
Terima kasih atas tanggapan Anda Nicolas Hevia, tetapi saya telah mencoba kode itu di atas dan Anda benar, tidak dapat memperbarui versi node-sass itu jika saya menggunakannya npm install node-sass@4.12. Tapi saya sudah mencoba dengan node-sass 4.14.1 di nodejs 12.18.3 dan tidak berhasil. Itulah mengapa saya merekomendasikan untuk menggunakan versi yang direkomendasikan oleh tim node-sass dan saya tidak menggunakannya ^. Karena itu akan memperbarui ke versi terbaru dari node-sass 4
— Titus Sutio Fanpula
8

Jika Anda kebetulan menggunakan CRA dengan yarnmanajer paket default gunakan yang berikut ini. Bekerja untuk saya.

yarn remove node-sass 
yarn add node-sass@4.14.1
— dhanushkac
sumber
2

Ini berfungsi untuk saya setelah menambahkan versi tertentu dari paket node-sass (node-sass@4.14.1)

— renu dadhich
sumber
1

Kesalahan ini terjadi ketika versi NodeJS dan Node Sass tidak cocok.

Anda dapat menyelesaikan masalah Anda dengan melakukan hal berikut:

- Langkah 1 : Hapus Nodejs dari komputer Anda

- Langkah 2 : Instal ulang Nodejs versi 14.15.1.

- Langkah 3 : Uninstall Node sass dengan menjalankan perintahnpm uninstall node-sass

- Langkah 4 : Instal ulang Node sass versi 4.14.1 dengan menjalankan perintahnpm install node-sass@4.14.1

Setelah semua langkah, Anda dapat menjalankan perintah ng serve -ountuk menjalankan aplikasi Anda.

Node sass versi 5.0.0 tidak kompatibel dengan ^ 4.0.0.

— Dung Do Tien
sumber
0

Jika kesalahannya adalah

Kesalahan: Node Sass versi 5.0.0 tidak kompatibel dengan ^ 4.0.0

Langkah 1: hentikan server

Langkah2: jalankan perintah npm uninstall node-sass

Langkah3: periksa node-sass package.jsonjika node-sass tersedia di file, lalu jalankan lagi Step2.

Step4: npm install node-sass@4.14.1<=== jalankan perintah

Step5: tunggu sampai perintah berhasil dijalankan.

Step6: start-server menggunakan npm start

— Nadeem Khan
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.