89

Récemment, lorsque je compile mes fichiers scss, j'obtiens une erreur. Le message d'erreur dit:

Browserslist: caniuse-lite est obsolète. Veuillez exécuter la commande suivantenpm update caniuse-lite browserslist

Tout d'abord, comme le message l'indique, j'ai couru npm update caniuse-lite browserslistmais cela n'a pas résolu le problème. J'ai supprimé tout le répertoire nod-modules et l'ai réinstallé, j'ai également mis à jour tout le dossier npm updatemais aucun n'a résolu le problème. J'ai également réinstallé l'autoprefixer et la liste de navigateurs, mais aucun d'entre eux n'a résolu le problème.

Si je supprime

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

de mon compilerconfig.json, tout fonctionne bien, ce qui signifie probablement qu'il est lié au préfixeur automatique. En outre, j'ai changé manuellement la version du package vers la dernière version package.jsonet réinstallé mais pas de chance.

— Mehrdad Babaki
source

42

Il semble que vous utilisez l'extension Web Compiler de Visual Studio. Il y a un problème ouvert pour cela trouvé ici: https://github.com/madskristensen/WebCompiler/issues/413

Il existe une solution de contournement publiée dans ce problème:

Fermer Visual Studio
Dirigez-vous vers C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X(X est la version de WebCompiler)
Supprimez les dossiers suivants du node_modulesdossier: caniuse-liteet browserslist ouvrez CMD (à l'intérieur C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) et exécutez:npm i caniuse-lite browserslist

— Scott Kuhl
source

1

Je l'ai fait et je n'ai plus cette erreur mais j'ai une nouvelle erreur: Plugin Error: Impossible de trouver le module 'autoprefixer'. J'ai essayé de réinstaller et de mettre à jour le préfixeur automatique mais j'obtiens toujours cette erreur.

— Mehrdad Babaki

Cela ressemble à un problème différent. Si vous avez un lien vers votre projet en ligne ou pouvez monter un autre projet qui pose le problème, je serais heureux de l'examiner.

— Scott Kuhl

Il semble que lorsque j'essayais de résoudre le problème en mettant à niveau et en réinstallant le préfixeur automatique, j'avais cassé quelque chose. Heureusement, aujourd'hui, Web Compiler s'est mis à jour et j'ai de nouveau vu ce message d'erreur. J'ai suivi les étapes ci-dessus et cette fois le problème a été résolu.

— Mehrdad Babaki

Une idée de l'emplacement de ce répertoire sur le mac?

— Safa Alai

35

Essayez ceci, cela a résolu mon problème npx browserslist@latest --update-db

— Dipanker Shah
source

1

Pour le contexte: mon IDE est VS Code et mon projet JS n'incluait Parcel, react et react-dom que lorsque j'ai commencé à voir cette erreur. Aucune des options ci-dessus n'a fonctionné. Cette solution a corrigé la mienne.

— Klay

Dans PhpStorm a très bien fonctionné.

— Neolot

travaillé pour VueJS

— JOG

Cela m'a beaucoup aidé, merci cher 5 étoiles

— PacyL.js

Échec sous Windows `` `` C: \ projects \ ember-cli-typescript-blueprints> npx browserlist @ latest --update-db npm ERR! cb.apply n'est pas une fonction npm ERR! Un journal complet de cette exécution peut être trouvé dans: npm ERR! c: \ npm \ cache_logs \ 2020-11-15T14_19_08_958Z-debug.log L'installation pour ['browserlist @ latest'] a échoué avec le code 1 `` ``

— bryan.crotaz il y a

31

Pour les développeurs angulaires

Bien que je réponde très tard. J'ai une mauvaise habitude de vérifier les changelogs de chaque bibliothèque que j'utilise 😀 et en vérifiant les notes de publication de Angular CLI, j'ai compris qu'ils avaient publié un nouveau patch hier (9 janvier 2020) qui corrige ce problème.

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

Ainsi, lorsque vous exécuterez ng update, vous devriez obtenir des mises à jour pour @angular/cli:

Et courir ng update @angular/cli corrigera cet avertissement.

À votre santé!

— Shashank Agrawal
source

19

J'ai trouvé un raccourci plutôt que de passer par vs code appData/webCompiler, je l'ai ajouté comme dépendance à mon projet avec ce cmd npm i caniuse-lite browserslist . Mais vous pouvez l'installer globalement pour éviter de l'ajouter à chaque projet.

Après l'installation, vous pouvez le supprimer de votre projet package.jsonet fairenpm i .

Mise à jour:

Au cas où, la solution ci-dessus ne le résoudrait pas. Tu pourrais courirnpm update , car cela mettrait à niveau les packages obsolètes / obsolètes.

Remarque:

Après avoir exécuté la mise à jour de npm, des dépendances peuvent être manquantes. Recherchez l'erreur et installez les dépendances manquantes. Le mien était nodemon, que je corrige parnpm i nodemon -g

— akolliy
source

4

Je n'avais pas le dossier / WebCompiler dans mon dossier / TEMP comme certains autres articles suggérés ici, j'ai donc exécuté cette ligne de commande et il semble avoir résolu le problème.

— AppDreamer

13

Suite de la réponse ci-dessus .

A eu la même "erreur de plugin" que @MehrdadBabaki. J'ai désinstallé le compilateur Web, supprimé le dossier AppData WebCompiler mentionné ci-dessus, puis rouvert VS2019 et réinstallé le compilateur Web.

ALORS je suis retourné au dossier WebCompiler et je l'ai fait npm i autoprefixer@latest npm i caniuse-lite@latestetnpm i caniuse-lite browserslist@latest

— dirq
source

il suffit de mettre à jour le préfixeur automatique, caniuse-lite, la liste des navigateurs est bonne pour moi

— cwhsu

9

npm --depth 9999 updatecorrigé le problème pour moi - apparemment parce que package-lock.jsonj'insistais sur les versions obsolètes.

— Brett Zamir
source

11

Même npm --depth 99 update caniuse-lite browserslistcausé JavaScript heap out of memorydans mon projet, mais npm --depth 20 update caniuse-lite browserslistcourir vite et résoudre l'erreur dans mon cas.

— Alexandr Nil

5

Dans mon cas, je supprimé les caniuse-lite, browserslistdossiers denode_modules .

Ensuite, je tape la commande suivante pour installer les packages.

npm i -g browserslist caniuse-lite --save

a bien fonctionné.

— Gebru Welay Gerezigiher
source

1

Nous devions ajouternpm i browserslist caniuse-lite --save

— sournois le

3

La suppression node_moduleset package-lock.jsonet npm irésoudre le problème pour moi.

— CK
source

1

la suppression de package-lock.json peut entraîner une erreur de modification de rupture si vous avez une longue histoire d'installation de packages, par exemple un projet qui fonctionnait et développé depuis plus d'un an et dont les packages ont beaucoup de dépendance de 3ème niveau pourrait faire changements de rupture

— kafinsalim

2

Comme mentionné dans la réponse de Scott Kuhl, ce problème est mentionné dans https://github.com/madskristensen/WebCompiler/issues/413

Pour moi, exécuter la commande npm i caniuse-lite- browserslist ne fonctionnait que pendant environ 1/2 jour avant que ce ne soit à nouveau un problème.

La solution suivante, mentionnée dans l'article, fonctionne beaucoup mieux. Cela met à jour le fichier node.js afin qu'il utilise console.logau lieu deconsole.warn renvoyer ces erreurs.

Vous pouvez mettre à jour manuellement ce fichier situé dans C: \ Users \ [Username] \ AppData \ Local \ Temp \ WebCompiler [VersionNumber] \ node_modules \ browser

Ou, pour que cela se fasse automatiquement, ajoutez ce qui suit à votre fichier .csproj en:

Faites un clic droit sur le fichier projet et sélectionnez "Décharger le projet"
Modifiez le fichier .csproj
Collez ce qui suit dans le fichier de projet. Je l'ai collé vers la fin du fichier, avant la </Project>balise de fin et avant l'importation du package de compilation Web.

    <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>

Rechargez le projet dans la solution.

— Sylvia
source

Merci! C'était la meilleure solution pour moi. Les correctifs ci-dessus deviendraient obsolètes tous les deux jours!

— Bradly Bennison le

2

J'ai résolu ce problème en faisant, étape par étape:

retirer node_modules
supprimer package-lock.json,
courir npm --depth 9999 update
courir npm install

— Astro
source

1

J'ai eu le même problème aussi cette commande fonctionne pour moi

npm i autoprefixer@latest

Il a automatiquement ajouté une dépendance de besoin dans package.jsonet un package-lock.jsonfichier comme ci-dessous:

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
source

1

Je ne sais pas exactement où était mon problème, mais je pense que c'était parce que j'utilisais les mêmes packages globaux de npm et de Yarn.

J'ai désinstallé tous les packages globaux npm, puis lors de l'utilisation à nouveau des commandes yarn, le problème avait disparu.

Pour voir les packages globaux installés ...

pour npm:

npm ls -g --depth=0

pour le fil:

yarn global list

J'ai ensuite désinstallé chaque paquet que j'ai vu dans la liste npm, en utilisant:

npm uninstall -g <package-name>

— tno2007
source

0

Sur le Mac, j'ai supprimé node_modules et package-lock.json, puis exécuté npm install et cela a résolu mon problème.

— Safa Alai
source

-1

J'ai rétrogradé la version du nœud de 12 à 10

ÉDITER

Cette erreur s'est produite avec moi parce que j'utilisais la version 12 du nœud. Lorsque je rétrograde à la version 10.16.5, cette erreur s'arrête. Cette erreur s'est produite dans mon environnement local, mais dans la production et la mise en scène, cela ne se produit pas. La version du nœud de production et de préparation est 10.x, donc je fais juste cela et je n'ai pas besoin de mettre à jour un package dans mon package.json

— Murilo Ângelo
source

2

Bienvenue à SO! Lorsque vous postez une réponse, même si elle est juste, essayez d'expliquer un peu.

— David García Bodego

Ce n'est pas une mauvaise réponse ... il suffit de la modifier un peu et c'est fait.

— David García Bodego

-1

Pour résoudre le problème, vous pouvez taper la commande ci-dessous:

'npm -g mise à jour'

— Virendra
source

-1

Si vous utilisez du fil:

yarn upgrade

Aide pour moi

— TriSTaR
source

-1

Solution minimale qui a fonctionné pour moi pour le projet actuel

Un projet create-react-app
Ubuntu / * nix
2020
Nœud 14.7

supprimer le node_modules/browserslistrépertoire dans le projet

maintenant

npm run build

ne génère plus ce message

— Michael Durrant
source

Si vous venez de supprimer le répertoire, que se passera-t-il la prochaine fois que vous npm install/ npm ci?

— jonrsharpe

En fait, j'ai ensuite rencontré un problème avec css perfix, j'ai finalement mis à jour create-create-app pour ce projet et tout était bon.

— Michael Durrant

-3

Dans mon cas, cela fonctionne bien ...

sudo npm i -g browserslist caniuse-lite

— Biruel Rick
source

2

Il est fortement déconseillé d'utiliser sudoavec npm install -gcar cela peut entraîner des problèmes d'autorisations. Si vous ne pouvez pas installer de modules globalement, cela est en effet dû à des problèmes d'autorisation déjà existants. Une recherche SO vous aidera à le résoudre.

— Brady Dowling

Browserslist: caniuse-lite est obsolète. Veuillez exécuter la commande suivante `npm update caniuse-lite browser browser`

Pour les développeurs angulaires

Solution minimale qui a fonctionné pour moi pour le projet actuel