Browserslist: caniuse-lite está desactualizado. Ejecute el siguiente comando `npm update caniuse-lite browserslist`

88

Recientemente, cuando compilo mis archivos scss, aparece un error. El mensaje de error dice:

Browserslist: caniuse-lite está desactualizado. Ejecute el siguiente comandonpm update caniuse-lite browserslist

Primero, como dice el mensaje, corrí npm update caniuse-lite browserslistpero no solucionó el problema. Eliminé todo el directorio nod-modules y lo instalé nuevamente, también actualicé toda la carpeta npm updatepero ninguno de ellos resolvió el problema. También reinstalé autoprefixer y browserslist, pero ninguno de ellos resolvió el problema.

Si me quito 

"options": {
      "autoPrefix": "> 1%"
    }

desde mi punto de vista compilerconfig.json, todo funciona bien, lo que significa que probablemente esté relacionado con el autoprefixer. Además, cambié manualmente la versión del paquete a la última versión package.jsony la reinstalé, pero no tuve suerte.

npm  sass  autoprefixer  web-compiler 
— Mehrdad Babaki
fuente

Respuestas:

42

Parece que está utilizando la extensión Web Compiler de Visual Studio. Hay un problema abierto para esto que se encuentra aquí: https://github.com/madskristensen/WebCompiler/issues/413

Hay una solución alternativa publicada en ese problema:

  1. Cerrar Visual Studio
  2. Dirígete a C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X(X es la versión de WebCompiler)
  3. Elimine las siguientes carpetas de la node_modulescarpeta: caniuse-litey browserslist abra CMD (adentro C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) y ejecute:npm i caniuse-lite browserslist
— Scott Kuhl
fuente
1
Lo hice y ya no tengo ese error, pero tengo un nuevo error: Error de complemento: No se puede encontrar el módulo 'autoprefixer'. Traté de reinstalar y actualizar el autoprefixer pero todavía obtengo ese error.
— Mehrdad Babaki
Suena como un tema diferente. Si tiene un enlace a su proyecto en línea o puede armar otro proyecto que tenga el problema, estaré encantado de verlo.
— Scott Kuhl
Parece que cuando estaba tratando de solucionar el problema actualizando y reinstalando autoprefixer, había roto algo. Afortunadamente, hoy Web Compiler se actualizó y vi ese mensaje de error nuevamente. Seguí los pasos anteriores y esta vez el problema se solucionó.
— Mehrdad Babaki
¿Alguna idea de dónde está este directorio en la Mac?
— Safa Alai hace
34

Prueba esto resolvió mi problema npx browserslist@latest --update-db

— Dipanker Shah
fuente
1
Para el contexto: Mi IDE es VS Code, y mi proyecto JS solo incluía Parcel, react y react-dom cuando comencé a ver este error. Ninguna de las opciones anteriores funcionó. Esta solución arregló la mía.
— Klay
En PhpStorm funcionó muy bien.
— Neolot
trabajó para VueJS
— JOG
Esto me ayudó mucho, gracias querido 5 estrellas
— PacyL.js
31

Para desarrolladores angulares

Aunque, estoy respondiendo esto muy tarde. Tengo la mala costumbre de verificar los registros de cambios de todas las bibliotecas que uso 😀 y mientras revisaba las notas de la versión de Angular CLI, descubrí que lanzaron un nuevo parche ayer (9 de enero de 2020) que soluciona este problema.

https://github.com/angular/angular-cli/releases/tag/v8.3.22

Entonces, cuando se ejecute ng update, debe obtener actualizaciones para @angular/cli:

ingrese la descripción de la imagen aquí

Y correr ng update @angular/clisolucionará esta advertencia.

¡Salud!

— Shashank Agrawal
fuente
19

Encontré un atajo en lugar de pasar vs code appData/webCompiler, lo agregué como una dependencia a mi proyecto con este cmd npm i caniuse-lite browserslist . Pero puede instalarlo globalmente para evitar agregarlo a cada proyecto.

Después de la instalación, puede eliminarlo de su proyecto package.jsony hacerlo npm i.

Actualizar:

En caso de que la solución anterior no lo solucione. Podría ejecutar npm update, ya que esto actualizaría los paquetes obsoletos / desactualizados.

Nota:

Después de ejecutar la actualización de npm, es posible que falten dependencias. Rastree el error e instale las dependencias que faltan. El mío era nodemon, que arreglo pornpm i nodemon -g

— Akolliy
fuente
4
No tenía la carpeta / WebCompiler en mi carpeta / TEMP como sugirieron algunas otras publicaciones aquí, así que ejecuté esta línea de comando y parece haber solucionado el problema.
— AppDreamer
13

Continuación de la respuesta anterior .

Tenía el mismo "error de complemento" que @MehrdadBabaki. Desinstalé el compilador web, eliminé la carpeta AppData WebCompiler mencionada anteriormente, luego volví a abrir VS2019 y reinstalé el compilador web.

ENTONCES fui a la carpeta WebCompiler de nuevo y lo hice npm i autoprefixer@latest npm i caniuse-lite@latestynpm i caniuse-lite browserslist@latest

— dirq
fuente
solo actualice autoprefixer, caniuse-lite, la lista de navegadores es buena para mí
— cwhsu
9

npm --depth 9999 updatesolucionó el problema para mí, aparentemente porque package-lock.jsoninsistía en las versiones desactualizadas.

— Brett Zamir
fuente
11
Incluso npm --depth 99 update caniuse-lite browserslistcausado JavaScript heap out of memoryen mi proyecto, pero se npm --depth 20 update caniuse-lite browserslistejecuta rápido y solucionó el error en mi caso.
— Alexandr Nil
5

En mi caso, he eliminado las caniuse-lite, browserslistcarpetas de node_modules.

Luego escribo el siguiente comando para instalar los paquetes. 

npm i -g browserslist caniuse-lite --save

funcionó bien.

— Gebru Welay Gerezigiher
fuente
1
Tuvimos que agregarnpm i browserslist caniuse-lite --save
— furtivo
3

Eliminación node_modulesy package-lock.jsony npm iresolver el problema para mí.

— CK
fuente
1
eliminar package-lock.json podría dar como resultado algún error de cambios importantes si tiene un largo historial de instalación de paquetes, por ejemplo, un proyecto que estuvo funcionando y desarrollado durante más de un año y tiene paquetes que tienen una gran cantidad de dependencia de tercer nivel. cambios importantes
— kafinsalim
2

Como se menciona en la respuesta de Scott Kuhl, este problema se menciona en https://github.com/madskristensen/WebCompiler/issues/413

Para mí, ejecutar el comando npm i caniuse-lite- browserslistsolo funcionó durante aproximadamente 1/2 día antes de que volviera a ser un problema.

La siguiente solución, mencionada en la publicación, funciona mucho mejor. Esto actualiza el archivo node.js para que lo use en console.loglugar de console.warncuando devuelva estos errores.

Puede actualizar manualmente este archivo ubicado en C: \ Users \ [Username] \ AppData \ Local \ Temp \ WebCompiler [VersionNumber] \ node_modules \ browserslist

O, para que se haga automáticamente, agregue lo siguiente a su archivo .csproj de la siguiente manera:

  1. Haga clic derecho en el archivo del proyecto y seleccione "Descargar proyecto"
  2. Edite el archivo .csproj
  3. Pegue lo siguiente en el archivo del proyecto. Lo pegué hacia el final del archivo, antes de la </Project>etiqueta final y antes de que se importara el paquete del compilador web de compilación.
    <ItemGroup>
        <PackageReference Include="MSBuildTasks" Version="1.5.0.235">
            <PrivateAssets>all</PrivateAssets>
            <IncludeAssets>runtime; build; native; contentfiles; analyzers</IncludeAssets>
        </PackageReference>
    </ItemGroup>
    <PropertyGroup>
        <TempFolder>$([System.IO.Path]::GetTempPath())</TempFolder>
    </PropertyGroup>
    <ItemGroup>
        <BrowsersListNodeJsFiles Include="$(TempFolder)\WebCompiler*\node_modules\browserslist\node.js" />
    </ItemGroup>
    <Target Name="BrowsersListWarningsAsInfo" BeforeTargets="WebCompile">
        <FileUpdate Files="@(BrowsersListNodeJsFiles)"
                    Regex="console.warn"
                    ReplacementText="console.log" />
    </Target>
  1. Vuelva a cargar el proyecto en la solución.
— Sylvia
fuente
¡Gracias! Esta fue la mejor solución para mí. ¡Las correcciones anteriores quedarían obsoletas cada dos días!
— Bradly Bennison
2

He solucionado este problema haciendo, paso a paso:

  1. eliminar node_modules
  2. eliminar package-lock.json,
  3. correr npm --depth 9999 update
  4. correr npm install
— Astro
fuente
1

También tuve el mismo problema, este comando funciona para mí

npm i autoprefixer@latest

Se añade automáticamente necesidad de dependencia en package.jsony package-lock.jsonarchivo, como a continuación:

package.json

"autoprefixer": "^9.6.5",

package-lock.json

"@angular-devkit/build-angular": {

...

"dependencies": {
    "autoprefixer": {
      "version": "9.4.6",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.6.tgz",
      "integrity": "sha512-Yp51mevbOEdxDUy5WjiKtpQaecqYq9OqZSL04rSoCiry7Tc5I9FEyo3bfxiTJc1DfHeKwSFCUYbBAiOQ2VGfiw==",
      "dev": true,
      "requires": {
        "browserslist": "^4.4.1",
        "caniuse-lite": "^1.0.30000929",
        "normalize-range": "^0.1.2",
        "num2fraction": "^1.2.2",
        "postcss": "^7.0.13",
        "postcss-value-parser": "^3.3.1"
      }
    },

...

  }

...

"autoprefixer": {
    "version": "9.6.5",
    "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.5.tgz",
    "integrity": "sha512-rGd50YV8LgwFQ2WQp4XzOTG69u1qQsXn0amww7tjqV5jJuNazgFKYEVItEBngyyvVITKOg20zr2V+9VsrXJQ2g==",
    "requires": {
      "browserslist": "^4.7.0",
      "caniuse-lite": "^1.0.30000999",
      "chalk": "^2.4.2",
      "normalize-range": "^0.1.2",
      "num2fraction": "^1.2.2",
      "postcss": "^7.0.18",
      "postcss-value-parser": "^4.0.2"
    },

...

}
— Samet ÇELİKBIÇAK
fuente
1

No estoy exactamente seguro de dónde estaba mi problema, pero creo que fue porque estaba usando los mismos paquetes globales tanto de npm como de Yarn.

Desinstalé todos los paquetes globales de npm, luego, cuando volví a usar los comandos de yarn, el problema desapareció.

Para ver los paquetes globales instalados ...

para npm:

npm ls -g --depth=0

para hilo:

yarn global list

Luego desinstalé cada paquete que vi en la lista de npm, usando:

npm uninstall -g <package-name>
— tno2007
fuente
0

En Mac, eliminé node_modules y package-lock.json, luego ejecuté npm install y solucionó mi problema.

— Safa Alai
fuente
-1

Bajé la versión del nodo de 12 a 10

EDITAR

Este error ocurrió conmigo porque estaba usando la versión 12 del nodo. Cuando cambio a la versión 10.16.5, este error se detiene. Este error ocurrió en mi entorno local, pero en prod y staging, no sucede. En prod y la versión del nodo de ensayo es 10.x, así que simplemente hago esto y no necesitaba actualizar ningún paquete en mi package.json

— Murilo Ângelo
fuente
2
¡Bienvenido a SO! Cuando publique una respuesta, incluso si es correcta, intente explicar un poco.
— David García Bodego
No es una mala respuesta ... solo edítala un poquito y listo.
— David García Bodego
-1

Para solucionar el problema, puede escribir el siguiente comando:

'npm -g actualización'

— Virendra
fuente
-1

Solución mínima que funcionó para mí para el proyecto actual.

  • Un proyecto create-react-app
  • Ubuntu / * nix
  • 2020
  • Nodo 14.7

eliminar node_modules/browserslistdirectorio en el proyecto

ahora

npm run build

ya no genera ese mensaje

— Michael Durrant
fuente
Si usted acaba de eliminar el directorio, lo que pasa próxima vez que npm install/ npm ci?
— jonrsharpe
En realidad, luego encontré un problema con css perfix, finalmente actualicé create-create-app para ese proyecto y todo estuvo bien.
— Michael Durrant
-3

En mi caso esto funciona bien ...

sudo npm i -g browserslist caniuse-lite

— Biruel Rick
fuente
2
Se recomienda encarecidamente no usar sudocon, npm install -gya que esto puede causar problemas de permisos. Si no puede instalar módulos globalmente, esto se debe a problemas de permisos ya existentes. Una búsqueda SO ayudará a resolverlo.
— Brady Dowling
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.