Angular Browserslist: caniuse-lite n'est plus à jour. Veuillez exécuter la commande suivante `npm update`

J'ai récemment commencé à obtenir cette erreur sur un projet Angular 8 (nœud v10.16.0) sur lequel je travaille. L'exécution de la mise à jour npm de la liste des navigateurs caniuse-lite n'a rien fait

J'ai donc supprimé package-lock.json, supprimé node_modules et exécuté l'installation de npm, mais le fichier de la liste des navigateurs a disparu. Encore une fois, lorsque j'exécute ng build, je reçois le même message: Browserslist: caniuse-lite est obsolète. Veuillez exécuter la commande suivantenpm update

Je vois cet article sur le même sujet: Browserslist: caniuse-lite est obsolète. Veuillez exécuter la commande suivante `npm update caniuse-lite Browserslist` Cependant, il parle de WebCompiler et d'autoprefixer et je n'en ai aucune idée. Veuillez guider

angular npm-install

— SilverFish
source

Q: Avez-vous créé ce projet Angular avec Visual Studio? Q: Que s'est-il passé lorsque vous avez simplement suivi les instructions et couru npm update caniuse-lite browserslist?

— FoggyDay

Oui, le projet angulaire utilise Visual Studio 2017. Rien ne s'est produit lorsque j'utilise la liste de navigateurs de mise à jour npm caniuse-lite. Rien ne s'installe ...

— SilverFish

Étant donné que le fichier de la liste des navigateurs a disparu après avoir effectué une nouvelle installation de npm (caniuse-lite est là), recommandez-vous que je devrais exécuter npm dans la liste des navigateurs?

— SilverFish

je viens d'avoir le même problème. dans phpstrom, il me dit d'exécuter npm updatemais cela n'a pas résolu le problème, j'ai juste fait ma version dactylographiée à haut pour angular 8.

— BlakkM9

J'ai également ce même problème, Angular 8 utilisant du code Visual Studio bien que je ne sais pas pourquoi l'éditeur serait à l'origine de ce conflit. Avez-vous encore des réponses à ce sujet? Nous sommes censés publier une énorme nouvelle fonctionnalité cette semaine et bien sûr, notre application ne sera plus construite. Je vois plusieurs de nos node_modules en utilisant browserlist

— HomeBrew

Réponses:

Résolution d'un problème obsolète de caniuse-lite en exécutant les commandes ci-dessous.

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

— Dipten
source

npm cache cleanne fonctionne pas directement car il est géré automatiquement par npm dans les dernières versions. Voulez-vous que nous l'utilisions --force? Si oui, veuillez expliquer pourquoi nous devrions supprimer le cache.

— Vishnudev

npm cache clean n'est pas requis. vous pouvez exécuter directementnpm install caniuse-lite@latest --save

— Dipten

Ajouter caniuse-lite à votre application (via package.json bloat) n'est pas une bonne idée, car ce n'est pas une dépendance de votre application - seulement votre ensemble d'outils npm. Voir l'explication plus longue ci-dessous. '--Save' est également redondant car c'est maintenant l'action par défaut avec l'installation.

— JDH

Cela installe caniuse-lite avec succès pour moi, mais je reçois toujours la même erreur.

— nullmn

J'ai essayé avec le noeud 10.x et il a corrigé. veuillez vérifier la version de votre nœud.

— Dipten

TLDR: (peut sembler contre-intuitif sans l'explication)

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

Explication:

Ce message d'avertissement ("canisuse-lite est obsolète, s'il vous plaît ....") est généré par les scripts dans la liste des navigateurs lors de la construction / démarrage s'il trouve que la version installée de caniuse-lite est antérieure à 2 versions de la version actuelle. Si rien dans votre projet n'a changé et que vous voyez soudain ce message lors du démarrage ou de la construction de votre projet, cela signifie probablement qu'il y a eu une mise à jour récente de la version de caniuse-lite.

Malheureusement, le message texte que la liste des navigateurs affiche n'est utile que si vous avez installé caniuse-lite en tant que dépendance de votre projet. Probablement pas. Ainsi, lorsque vous exécutez la suggestion de «mise à jour npm caniuse-lite» ou «mise à jour npm» caniuse-lite @ latest »(ou« installation npm »), npm ne voit pas ce package répertorié dans vos dépendances package.json, il ignore donc la demande.

Comment ces packages sont-ils devenus des dépendances à l'époque? Lorsque votre projet a été créé (peut-être avec une application angularapp ou create-react-app ou similaire pour votre framework), npm a installé les navigateurs listés comme une dépendance de ses outils nécessaires, pas comme l'une des dépendances de votre projet. Dans le même temps, caniuse-lite a été installé en tant que dépendance de Browserslist. Plus tard, lorsque le projet a été mis à jour, un fichier package-lock.json a été créé qui verrouille toutes les dépendances sur une version spécifique.

Si vous pouviez mettre à jour les informations de version dans la liste des dépendances dans package-lock.json, l'exécution de 'npm install' mettrait à jour ces packages dans node_modules. Vous ne devez pas modifier package-lock.json manuellement. Au lieu de cela, la meilleure façon de le faire est:

Faites temporairement de ces packages une dépendance de votre projet:

npm install caniuse-lite Browserslist

En plus de mettre à jour le package vers la dernière version, cela met à jour la liste des dépendances dans package.json et (surtout) package-lock.json.
Supprimez ces packages en tant que dépendances directes de votre projet:

npm désinstaller la liste de navigateurs de caniuse-lite

Étant donné que ces packages sont utilisés par d'autres dépendances, ils ne sont pas supprimés de node_modules. Seul package.json est mis à jour pour les supprimer en tant que dépendance de projet.
Validez package-lock.json. N'importe qui d'autre peut maintenant simplement exécuter 'npm install' pour obtenir les deux packages mis à jour à partir de la liste des sous-dépendances dans package-lock.json et arrêter le message d'avertissement.

— jdh
source

J'ai essayé votre solution mais j'ai toujours un avertissement avec ce message (Browserslist: caniuse-lite est obsolète. Veuillez exécuter la commande suivante npm update) et avec une configuration angulaire propre.

— Alexander Kushnir

@AlexanderKushir - après avoir effectué l'installation à l'étape 1, recherchez dans node_modules pour Browserslist et caniuse-lite pour vérifier si la version dans leur package individuel.json a été mise à jour (devrait être 1.0.30001019 pour caniuselite et 4.8.3 pour Browserslist, comme d'aujourd'hui). La nouvelle version de browserlist (4.8.3) ne devrait se plaindre que si canisuelite n'a pas été mis à jour. Est-il possible que vous ayez un serveur de mise en cache défini dans .npmrc qui ne met pas à jour ces deux packages? (Si vous l'êtes, essayez de renommer temporairement .npmrc avant de faire l'installation?)

— jdh

Je n'avais qu'à faire tout ça caniuse-liteet le message est parti

— MoonStom

@MoonStom - si vous installez uniquement caniuse-lite, vous ajoutez cela en tant que dépendance de votre application, ce qui n'est pas exact. Le problème est dans npm et Browserslist. Une fois ceux-ci résolus, votre application ne devrait plus dépendre de caniuse-lite.

— JDH