Lista de navegadores angulares: caniuse-lite está desactualizado. Ejecute el siguiente comando `npm update`

Recientemente comencé a recibir este error en un proyecto Angular 8 (nodo v10.16.0) en el que estoy trabajando. Ejecutar npm update caniuse-lite browserslist no hizo nada

Así que eliminé package-lock.json, eliminé node_modules y ejecuté npm install, pero el archivo de la lista del navegador desapareció. Nuevamente, cuando ejecuto ng build, recibo el mismo mensaje: Browserslist: caniuse-lite está desactualizado. Por favor ejecute el siguiente comandonpm update

Veo esta publicación sobre el mismo tema: Browserslist: caniuse-lite está desactualizado. Ejecute el siguiente comando `npm update caniuse-lite browserslist` Sin embargo, habla sobre WebCompiler y autoprefixer y no tengo ni idea de eso. Por favor guía

angular npm-install

— Lepisma
fuente

P: ¿Creaste este proyecto angular con Visual Studio? P: ¿Qué pasó cuando simplemente seguiste las instrucciones y corriste npm update caniuse-lite browserslist?

— FoggyDay

Sí, el proyecto angular está usando Visual Studio 2017. No sucedió nada cuando uso la lista de navegadores npm update caniuse-lite. Nada se instala ...

— SilverFish

Dado que el archivo de la lista del navegador desapareció después de que hice una nueva instalación de npm (caniuse-lite está allí), ¿me recomienda que ejecute npm en la lista del navegador?

— SilverFish

Acabo de tener el mismo problema. en phpstrom me dice que corra npm updatepero esto no resolvió el problema, solo hizo que mi versión mecanografiada fuera alta para angular 8.

— BlakkM9

También tengo este mismo problema, Angular 8 usando el código de Visual Studio, aunque no estoy seguro de por qué el editor estaría causando este conflicto. ¿Alguna respuesta sobre esto todavía? Se supone que debemos lanzar una nueva característica enorme esta semana y, por supuesto, ahora nuestra aplicación no se compilará. Veo varios de nuestros node_modules usando la lista del navegador

— HomeBrew

Respuestas:

Se resolvió el problema obsoleto de caniuse-lite ejecutando los siguientes comandos.

npm cache clean  # optional
npm install caniuse-lite@latest --save

— Dipten
fuente

npm cache cleanno funciona directamente, ya que npm lo maneja automáticamente en las últimas versiones. ¿Quieres que usemos --force? En caso afirmativo, explique por qué deberíamos eliminar la memoria caché.

— Vishnudev

npm cache clean no se requiere uno. puedes correr directamentenpm install caniuse-lite@latest --save

— Dipten

Agregar caniuse-lite a su aplicación (a través de package.json bloat) no es una buena idea, ya que no es una dependencia de su aplicación, solo su conjunto de herramientas npm. Ver explicación más larga a continuación. Además, '--save' es redundante, ya que ahora es la acción predeterminada con la instalación.

— jdh

Esto instala caniuse-lite con éxito para mí, pero sigo teniendo el mismo error.

— nulo el

Intenté con el nodo 10.xy se solucionó. por favor verifique la versión de su nodo.

— Dipten

TLDR: (puede parecer contrario a la intuición sin la explicación)

  npm install caniuse-lite browserslist
  npm uninstall caniuse-lite browserslist

Explicación:

Este mensaje de advertencia ("canisuse-lite está desactualizado, por favor ...") se genera mediante scripts en la lista del navegador durante la compilación / inicio si encuentra que la versión instalada de caniuse-lite es anterior a 2 versiones de la versión actual. Si nada en su proyecto cambió y de repente ve este mensaje al iniciar o construir su proyecto, probablemente significa que hubo una actualización de versión reciente de caniuse-lite.

Desafortunadamente, el mensaje de texto que muestra la lista de navegadores solo es útil si instaló caniuse-lite como una dependencia de su proyecto. Lo más probable es que no lo hiciste. Entonces, cuando ejecuta la sugerencia 'npm update caniuse-lite' o 'npm update' caniuse-lite @ latest '(o' npm install '), npm no ve ese paquete en la lista de sus dependencias package.json, por lo que ignora la solicitud.

¿Cómo se convirtieron esos paquetes en dependencias entonces? Cuando se creó su proyecto (tal vez con la aplicación angularapp o create-react-app o similar para su marco), npm instaló la lista de navegadores como una dependencia de sus herramientas necesarias, no como una de las dependencias de su proyecto. Al mismo tiempo, caniuse-lite se instaló como una dependencia de la lista de navegadores. Más tarde, cuando se actualizó el proyecto, se creó un archivo package-lock.json que bloquea todas las dependencias a una versión específica.

Si pudo actualizar la información de la versión en la lista de dependencias en package-lock.json, la ejecución de 'npm install' actualizaría estos paquetes en node_modules. No debe editar package-lock.json manualmente. En cambio, la mejor manera de hacerlo es:

Transforme temporalmente estos paquetes en una dependencia de su proyecto:

npm install lista de navegadores caniuse-lite

Además de actualizar el paquete a la última versión, esto actualiza la lista de dependencias en package.json y (lo más importante) package-lock.json.
Elimine estos paquetes como dependencias directas de su proyecto:

npm desinstalar la lista de navegadores caniuse-lite

Como estos paquetes son utilizados por otras dependencias, no se eliminan de node_modules. Solo package.json se actualiza para eliminarlos como una dependencia del proyecto.
Confirmar package-lock.json. Cualquier otra persona ahora puede ejecutar 'npm install' para obtener los dos paquetes actualizados de la lista de subdependencias en package-lock.json, y detener el mensaje de advertencia.

— jdh
fuente

He probado su solución, pero aún tengo una advertencia con este mensaje (Browserslist: caniuse-lite está desactualizado. Ejecute el siguiente comando npm update) y con una configuración angular limpia.

— Alexander Kushnir

@AlexanderKushir: después de realizar la instalación en el paso 1, busque en node_modules la lista de navegadores y caniuse-lite para verificar si se actualizó su versión en su paquete individual.json (debe ser 1.0.30001019 para caniuselite y 4.8.3 para la lista de navegadores, como de hoy). La nueva versión de browserlist (4.8.3) solo debería quejarse si canisuelite no se actualizó. ¿Es posible que tenga un servidor de almacenamiento en caché configurado en .npmrc que no actualice estos dos paquetes? (Si es así, intente renombrar temporalmente .npmrc antes de realizar la instalación).

— jdh

Solo tenía que hacer todo eso caniuse-litey el mensaje desapareció

— MoonStom

@MoonStom: si solo instala caniuse-lite, lo agregará como una dependencia de su aplicación, lo cual no es exacto. El problema está en npm y en la lista de navegadores. Una vez que se hayan solucionado, su aplicación no debería depender de caniuse-lite.

— jdh