Error: Node Sass versión 5.0.0 es incompatible con ^ 4.0.0

Nov 01 2020

npx create-react-appCreé un proyecto React en blanco, usando el comando: en npm v7.0.7 y Node v15.0.1

Instalado:

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

Luego intenté importar un archivo .scss en blanco al componente de la aplicación:

App.js

import './App.scss'

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

export default App;

Lanzar un error:

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

Respuestas

639 NicolasHevia Nov 01 2020 at 04:26

TL; DR

npm uninstall node-sass
npm install [email protected]

O, si usa hilo (predeterminado en las versiones más recientes de CRA)

yarn remove node-sass
yarn add [email protected]

Edit2 : sass-loader v10.0.5 lo corrige. El problema es que es posible que no lo esté usando como una dependencia del proyecto, sino más como una dependencia de sus dependencias. CRA usa una versión fija, bloqueos de cli angular para node-sass v4 y así sucesivamente.
La recomendación por ahora es: si está instalando solo node-sass, verifique la siguiente solución alternativa (y la nota). Si está trabajando en un proyecto en blanco y puede administrar la configuración de su paquete web (sin usar CRA o una CLI para andamiar su proyecto) instale el último cargador de sass.

Editar : este error proviene de sass-loader . Hay una discrepancia de semver ya que node-sass @latest es v5.0.0 y sass-loader espera ^ 4.0.0.
Hay un problema abierto en su repositorio con una solución asociada que debe revisarse. Hasta entonces, consulte la solución a continuación.

Solución alternativa : no instale node-sass 5.0.0 todavía (la versión principal acaba de saltar).

Desinstalar node-sass

npm uninstall node-sass

Luego instale la última versión (antes de la 5.0)

npm install [email protected]

Nota: LibSass (por lo tanto, node-sass también) está en desuso y dart-sass es la implementación recomendada. En su sasslugar , puede usar , que es una distribución de nodo de dart-sass compilada en JavaScript puro. Sin embargo, ten en cuenta:

Tenga cuidado al utilizar este enfoque. React-scripts usa sass-loader v8, que prefiere node-sass a sass (que tiene alguna sintaxis que no es compatible con node-sass). Si ambos están instalados y el usuario trabajó con sass, esto podría provocar errores en la compilación css

34 freeezer98 Nov 01 2020 at 21:07

Desinstalar node-sass

npm uninstall node-sass

use sass por:

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

30 TitusSutioFanpula Nov 14 2020 at 17:50

La única razón por la que obtiene un error como ese es porque la versión de su nodo no es compatible con su versión de node-sass.

Por lo tanto, asegúrese de consultar la documentación aquí: https://www.npmjs.com/package/node-sass

O esta imagen a continuación le ayudará, lo que la versión de nodo puede usar la versión de node-sass.

Por ejemplo, si está utilizando la versión 12 del nodo en su Windows ("tal vez"), entonces debería tener que instalar la versión 4.12 de node-sass .

npm install [email protected]

Si, como esto. Así que ahora solo necesita instalar la versión de node-sass recomendada por el equipo de node-sass con los nodos instalados en su computadora.