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

530

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

TL; DR

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

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

  1. yarn remove node-sass
  2. 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 utiliza 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:

Be careful using this approach. React-scripts uses sass-loader v8, which prefers node-sass to sass (which has some syntax not supported by node-sass). If both are installed and the user worked with sass, this could lead to errors on css compilation

12
  • 11
    por alguna razón yarn add [email protected]es mucho más rápidoTylik Stec 1 nov.20 a las 9:17
  • 4
    Parece que lo arreglaron en github.com/webpack-contrib/sass-loader/commit/… , por lo que puede instalar [email protected]Marcin 2 nov.20 a las 12:25
  • 3
    @TylikStec yarn es otro administrador de paquetes, pero no use ambos en el mismo proyecto, tener dos archivos de bloqueo puede causar problemas en la implementaciónBinara Medawatta 3 nov.20 a las 11:43
  • 18
    @marcin es gracioso que digas "ellos" ya que la persona que publicó la respuesta es la que la arregló:]Benjamin Gruenbaum 3 nov.20 a las 18:49
  • 3
    En un nuevo proyecto de React similar a OP, tengo "node-sass": "v5.0.0" y "sass-loader": "^ 10.1.0", pero el problema persiste. La versión de mi nodo es 15.3.0. Cuando desinstalo node-sass y vuelvo a instalar @ 4.14.1, el problema persiste ya que estoy usando Node versión 15.3.0 que espera node-sass versión 5.0+. Brendan 2 dic.20 a las 21:36
76

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.

ingrese la descripción de la imagen aquí

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 del nodo-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.

4
  • Con este enfoque, está bloqueado en v4.x, en lugar de tener la última versión de v4. Por ejemplo, el nodo 12 se quedaría atascado con 4.12 incluso si es compatible con 4.14. La actualización de npm node-sass no funcionaría a menos que use npm install [email protected]^4.12lo mismo que instalar 4.14.1 (última versión conocida de v4). Nicolas Hevia 15 nov.20 a las 12:00
  • Gracias por tu respuesta, Nicolas Hevia, pero he probado el código anterior y tienes razón, no puedo actualizar esa versión de node-sass si estoy en uso npm install [email protected]. Pero he intentado con node-sass 4.14.1 en nodejs 12.18.3 y no funciona. Es por eso que recomendé usar la versión que recomendó el equipo de node-sass y no la uso ^. Porque se actualizará a la última versión de node-sass 4Titus Sutio Fanpula 15 nov.20 a las 13:38
  • Esto funciona en contraste con las otras sugerencias. Dejan Toteff 3 de febrero a las 0:35
  • Esto funciona, tuve algunos problemas al instalar node-sadd @ 4Florian 22 de abril a las 8:15
48

Desinstalar node-sass

npm uninstall node-sass

use sass por:

npm install -g sass
npm install --save-dev sass
5
  • 6
    Tenga cuidado al utilizar este enfoque. React-scripts usa sass-loader v8, que prefiere node-sass a sass (que tiene alguna sintaxis no 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. Nicolas Hevia 12/11/20 a las 15:16
  • 2
    Y también, tenga cuidado con las instalaciones globales. Dave Kanter 4 dic.20 a las 22:04
  • 3
    Evite las instalaciones globales para dependencias específicas del proyecto. Siempre puede hacer referencia a una dependencia local con el ejemplo de npx npx sassmientras está en el repositorio del proyecto. fengelhardt 9/12/20 a las 20:22
  • 1
    Estoy usando el nodo v14.15.3 con node-sass 4.14.1 y solo funciona el enfoque sass. Desinstalar y reconstruir node-sass o actualizarlo a 5.x no resolvió el problema. ¡Gracias! Mike 23 dic.20 a las 9:10
  • Esta es la mejor respuesta porque webpack recomienda encarecidamente usarDart SassMo. 20 de mayo a las 18:40
38

node-sassaka LibSass está oficialmente obsoleto a partir del 26 de octubre de 2020 y en su lugar debería usar sassaka Dart Sass .

Porque npmpodrías hacer:

npm uninstall node-sass
npm install sass --save-dev

Para yarnhacer:

yarn remove node-sass
yarn add sass
3
  • Incluso después de esa solución de hilo, obtengo Node Sass versión 6.0.1 es incompatible con ^ 4.0.0 || ^ 5.0.0. Erik Martines Sanches 27 de julio a las 17:18
  • @Erik Martines Sanches Por el mensaje de error, es obvio que node sass no se desinstalóyoel halb 30 de julio a las 3:51
  • @ErikMartinesSanches intente reiniciar su servidor de nodo después de la instalación. Yonatan Dawit 31 de julio a las 12:18
10

Si usa CRA con el administrador de yarnpaquetes predeterminado , use lo siguiente. Trabajó para mi.

yarn remove node-sass 
yarn add [email protected]
7

Usando npm,

  1. npm uninstall node-sass
  2. npm install node-sass
  3. cambie el "react-scripts": "4.0.0"en "react-scripts": "4.0.3"en package.json y guarde
  4. npm install
  5. npm start

o, usando hilo -

  1. yarn remove node-sass
  2. yarn add --dev node-sass
  3. como anteriormente
  4. yarn install
  5. yarn start
2
  • 1
    Confirmado que esto funciona con Node 15 y node-sass 5.0.0. Thomas Higginbotham 9 de abril a las 13:53
  • no funcionó Falta de enlace /Users/giz/code/genesislabs/client/node_modules/node-sass/vendor/darwin-x64-83/binding.node Node Sass no pudo encontrar un enlace para su entorno actual: OS X de 64 bits con Node.js 14.xNir O. 2 de mayo a las 16:39
6

la mejor solución para mí fue desinstalar node sass.

npm uninstall node-sass

luego instala sass npm install sass

para los que usan hilo

 yarn remove node-sass
 yarn add sass
2
  • node-sass no aparece en mi package.json incluso antes de intentar "eliminar el hilo de node-sass". Erik Martines Sanches 27 de julio a las 17:14
  • ¿Pudiste arreglar esto? si no, tal vez podría describir lo que ha estado enfrentando y podemos intentar encontrar una solución. Devguru 19 de agosto a las 7:30
4

Me funcionó después de agregar una versión particular del paquete node-sass ([email protected])

3

Este es un problema de versión, instale la versión dependiente correcta

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

Si el error es

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0

Paso 1: detenga el servidor

Paso 2: los comandos de ejecución son npm uninstall node-sass

Paso 3: verifique node-sass package.jsonsi node-sass está disponible en el archivo y luego vuelva a ejecutar Step2.

Paso 4: npm install [email protected]<=== ejecutar comando

Paso 5: espere hasta que el comando se ejecute correctamente.

Paso 6: iniciar el servidor usando npm start

1

Pequeña actualización: en caso de que obtenga el siguiente error con respecto a node-sass, siga los pasos que se indican a continuación.

code EPERM
npm ERR! syscall unlink

pasos para resolver el problema:

  1. cerrar estudio visual
  2. eliminar manualmente .node-sass.DELETE de node_modules
  3. estudio visual abierto
  4. npm cache verificar
  5. npm install [email protected]
1

Simplemente cambie la versión a: "versión": "4.14.1" en su archivo package.json

1

Agregar sass-loader como dev-dependency resolvió esto por mí. "devDependencies": {"node-sass": "^ 6.0.0", "sass-loader": "^ 11.1.1"}

1

Encontré el mismo problema, y ​​así es como pude solucionarlo:

En primer lugar, debe saber qué node-sassversión está utilizando en su proyecto, luego actualizar o degradar su nodeJSversión actual a la versión compatible con su node-sassversión actual , puede saber eso desde este enlace .

Ofc, detenga el servidor y cierre su IDE.

Por lo tanto, la mejor manera de actualizar o degradar la nodeJSversión, se ha mencionado anteriormente en esta respuesta , a continuación, quitar el node_modules, y package-lock.jsone instalar de nuevo .. Puede hacerlo como tal:

npm cache clean --force

rm -rf /node_modules package-lock.json

npm install

npm audit fix

npm run <your_script_name>

¡Buena suerte!

-1

Pasos para resolver este problema:

  1. Vaya a su node_module y abra los módulos node-sass.

2 En package.json dentro de node-sass, cambie la versión de "5.0.0" a "4.14.1".

3 Finalmente, en el package.json en la raíz del proyecto principal, cambie nuevamente la versión de node-sass de "5.0.0" a "4.14.4".

Esto debería funcionar.