Error: la versión 5.0.0 de 'node-sass' es incompatible con ^4.0.0
Creé un proyecto React en blanco, usando el comando: npx create-react-appen npm v7.0.7 y Node.js v15.0.1
Instalado:
- Reaccionar v17.0.1,
- nodo-sass v5.0.0,
Luego intenté importar un archivo .scss en blanco al componente de la aplicación:
Archivo aplicación.js
import './App.scss'
function App() {
return (
<div className="App">
App
</div>
);
}
export default App;
Tira 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.
Paquete de archivos.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
npm uninstall node-sassnpm install sass
O, si usa hilo
yarn remove node-sassyarn add sass
Edit3 : sí, otra edición. Pasar a sass (dart-sass) es la mejor solución. El anterior incluía bloquear node-sass a la versión 4.xx, que tiene 2 años y carece de funciones SCSS más nuevas.
Edit2 : sass-loader v10.0.5 lo soluciona. El problema es que es posible que no lo estés utilizando como una dependencia del proyecto, sino más bien como una dependencia de tus dependencias. CRA usa una versión fija, bloqueos angular-cli para node-sass v4, etc.
La recomendación por ahora es: si está instalando solo node-sass, consulte la solución alternativa a continuación (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 CLI para desarrollar su proyecto), instale la última versión de sass-loader.
Editar : este error proviene de sass-loader . Hay una discrepancia en las versiones semánticas 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 ser eliminada).
Desinstalar nodo-sass
npm uninstall node-sass
Luego instale la última versión (anterior a 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. Puedes usar sassen su lugar , que es una distribución Node.js de dart-sass compilada en JavaScript puro.
La única razón por la que recibe un error como ese es porque su versión de Node.js no es compatible con su versión de Node-sass.
Por lo tanto, asegúrese de consultar la documentación en node-sass .
O esta imagen a continuación le ayudará a decidir qué versión de Node.js puede usar la versión node-sass.
Por ejemplo, si está utilizando la versión 12 de Node.js en su sistema Windows ("tal vez"), entonces debería instalar la versión 4.12 de node-sass .
npm install [email protected]
Si, como esto. Entonces ahora solo necesita instalar la versión de node-sass recomendada por el equipo de node-sass con la versión de Node.js instalada en su computadora.
Desinstalar nodo-sass:
npm uninstall node-sass
Utilice descaro por:
npm install -g sass
npm install --save-dev sass
node-sassalias LibSass está oficialmente obsoleto a partir del 26 de octubre de 2020 y en su lugar deberías usar sassalias Dart Sass .
Para npmusted podría hacer:
npm uninstall node-sass
npm install sass --save-dev
Para yarnhacer:
yarn remove node-sass
yarn add sass
La mejor solución para mí fue desinstalar node-sass .
npm uninstall node-sass
luego instala descaro:
npm install sass
Para aquellos que usan hilo :
yarn remove node-sass
yarn add sass