Erro: Node Sass versão 5.0.0 é incompatível com ^ 4.0.0

Nov 01 2020

Criei um projeto React em branco, usando o comando: npx create-react-appno npm v7.0.7 e no Node v15.0.1

Instalado:

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

Em seguida, tentei importar o arquivo .scss em branco para o componente do aplicativo:

App.js

import './App.scss'

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

export default App;

Lance um erro:

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

Respostas

639 NicolasHevia Nov 01 2020 at 04:26

TL; DR

npm uninstall node-sass
npm install [email protected]

Ou, se estiver usando yarn (padrão nas versões mais recentes do CRA)

yarn remove node-sass
yarn add [email protected]

Edit2 : sass-loader v10.0.5 corrige isso. O problema é que você pode não estar usando-o como uma dependência do projeto, mas mais como uma dependência de suas dependências. CRA usa uma versão fixa, angular-cli locks para node-sass v4 e assim por diante.
A recomendação por enquanto é: se você estiver instalando apenas o node-sass, verifique a solução alternativa abaixo (e a nota). Se você estiver trabalhando em um projeto em branco e puder gerenciar a configuração do seu webpack (sem usar CRA ou um CLI para estruturar seu projeto), instale o sass-loader mais recente.

Edit : este erro vem do sass-loader . Há uma incompatibilidade de sempre, pois node-sass @latest é v5.0.0 e sass-loader espera ^ 4.0.0.
Há um problema aberto em seu repositório com uma correção associada que precisa ser revisada. Até então, consulte a solução abaixo.

Solução alternativa : não instale o node-sass 5.0.0 ainda (a versão principal acabou de bater).

Desinstalar node-sass

npm uninstall node-sass

Em seguida, instale a versão mais recente (antes de 5.0)

npm install [email protected]

Nota: LibSass (portanto, node-sass também) está obsoleto e dart-sass é a implementação recomendada. Você pode usar em sassvez disso , que é uma distribuição de nó de dart-sass compilado para JavaScript puro. Porém, esteja avisado:

Tenha cuidado ao usar essa abordagem. Os scripts do React usam o sass-loader v8, que prefere o node-sass ao sass (que tem alguma sintaxe não suportada pelo node-sass). Se ambos estiverem instalados e o usuário trabalhar com sass, isso pode levar a erros na compilação do css

34 freeezer98 Nov 01 2020 at 21:07

Desinstalar node-sass

npm uninstall node-sass

use atrevimento por:

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

30 TitusSutioFanpula Nov 14 2020 at 17:50

A única razão pela qual você obtém algum erro como esse é porque sua versão do node não é compatível com sua versão do node-sass.

Portanto, certifique-se de verificar a documentação aqui: https://www.npmjs.com/package/node-sass

Ou esta imagem abaixo vai te ajudar, qual a versão do node pode usar a versão do node-sass.

Por exemplo, se você estiver usando o node versão 12 em seu Windows ("talvez"), você deverá instalar o node-sass versão 4.12 .

npm install [email protected]

Sim, assim. Portanto, agora você só precisa instalar a versão node-sass recomendada pela equipe node-sass com os nodes instalados em seu computador.