Kesalahan: Node Sass versi 5.0.0 tidak kompatibel dengan ^ 4.0.0

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

TL; DR

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

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

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

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 [email protected]

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

Copot pemasangan node-sass

npm uninstall node-sass

gunakan sass oleh:

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

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.

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.

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

Ini berfungsi untuk saya setelah menambahkan versi tertentu dari paket node-sass ([email protected])

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 [email protected]

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.

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 [email protected]<=== jalankan perintah

Step5: tunggu sampai perintah berhasil dijalankan.

Step6: start-server menggunakan npm start