Daftar peramban: caniuse-lite sudah usang. Jalankan perintah berikutnya `npm update caniuse-lite browserlist`


97

Baru-baru ini, ketika saya mengkompilasi file scss saya, saya mendapatkan kesalahan. Pesan kesalahan mengatakan:

Daftar peramban: caniuse-lite sudah usang. Silakan jalankan perintah selanjutnyanpm update caniuse-lite browserslist

Pertama, seperti yang tertulis di pesan, saya menjalankan npm update caniuse-lite browserslisttetapi tidak memperbaiki masalah. Saya menghapus seluruh direktori nod-modules dan menginstal lagi, juga saya memperbarui seluruh folder npm updatetetapi tidak ada yang menyelesaikan masalah. Saya juga menginstal ulang autoprefixer dan daftar browser tetapi tidak satupun dari mereka menyelesaikan masalah.

Jika saya menghapus

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

dari saya compilerconfig.json, semuanya berfungsi dengan baik yang berarti mungkin itu terkait dengan autoprefixer. Juga, saya secara manual mengubah versi paket ke versi terbaru package.jsondan menginstal ulang tetapi tidak berhasil.

Jawaban:


45

Sepertinya Anda menggunakan ekstensi Kompilator Web Visual Studio. Ada masalah terbuka untuk ini ditemukan di sini: https://github.com/madskristensen/WebCompiler/issues/413

Ada solusi yang diposting dalam masalah itu:

  1. Tutup Visual Studio
  2. Kepala ke C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X(X adalah versi WebCompiler)
  3. Hapus folder berikut dari node_modulesfolder: caniuse-litedan browserslist Buka CMD (di dalam C:\Users\USERNAME\AppData\Local\Temp\WebCompilerX.X.X) dan jalankan:npm i caniuse-lite browserslist

1
Saya melakukannya dan saya tidak mengalami kesalahan itu lagi tetapi saya mendapat kesalahan baru: Kesalahan Plugin: Tidak dapat menemukan modul 'autoprefixer'. Saya mencoba menginstal ulang dan memperbarui autoprefixer tetapi saya masih mendapatkan kesalahan itu.
Mehrdad Babaki

Kedengarannya seperti masalah yang berbeda. Jika Anda memiliki tautan ke proyek Anda secara online atau dapat menyusun proyek lain yang bermasalah, saya akan dengan senang hati melihatnya.
Scott Kuhl

Sepertinya ketika saya mencoba memperbaiki masalah dengan meningkatkan dan menginstal ulang autoprefixer saya telah merusak sesuatu. Untungnya, hari ini Web Compiler memperbarui dirinya sendiri dan saya melihat pesan kesalahan itu lagi. Saya mengikuti langkah-langkah di atas dan kali ini masalah diperbaiki.
Mehrdad Babaki

Tahu di mana direktori ini di mac?
Safa Alai

48

Coba ini memecahkan masalah saya npx browserslist@latest --update-db


2
Untuk konteks: IDE saya adalah VS Code, dan proyek JS saya hanya menyertakan Parcel, react, dan react-dom ketika saya mulai melihat kesalahan ini. Tak satu pun dari opsi di atas berfungsi. Solusi ini memperbaiki milik saya.
Klay

Gagal di Windows `` C: \ projects \ ember-cli-typescript-blueprints> npx browserlist @ latest --update-db npm ERR! cb.apply bukanlah fungsi npm ERR! Log lengkap dari proses ini dapat ditemukan di: npm ERR! c: \ npm \ cache_logs \ 2020-11-15T14_19_08_958Z-debug.log Instal untuk ['browserlist @ latest'] gagal dengan kode 1 ``
bryan.crotaz

31

Untuk Pengembang Angular

Meskipun, saya menjawab ini sangat terlambat. Saya memiliki kebiasaan buruk memeriksa changelogs dari setiap perpustakaan yang saya gunakan 😀 dan saat memeriksa catatan rilis CLI Angular, saya menemukan bahwa mereka merilis tambalan baru kemarin (9 Jan 2020) yang memperbaiki masalah ini.

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

Jadi ketika Anda akan menjalankan ng update, Anda harus mendapatkan pembaruan untuk @angular/cli:

masukkan deskripsi gambar di sini

Dan menjalankannya ng update @angular/cliakan memperbaiki peringatan ini.

Bersulang!


19

Saya menemukan jalan pintas daripada melalui vs code appData/webCompiler, saya menambahkannya sebagai ketergantungan pada proyek saya dengan cmd ini npm i caniuse-lite browserslist . Tetapi Anda mungkin menginstalnya secara global untuk menghindari penambahannya ke setiap proyek.

Setelah instalasi, Anda dapat menghapusnya dari proyek Anda package.jsondan melakukannya npm i.

Memperbarui:

Jika, solusi Di atas tidak memperbaikinya. Anda dapat menjalankannya npm update, karena ini akan meningkatkan paket yang tidak lagi digunakan / usang.

catatan:

Setelah Anda menjalankan pembaruan npm, mungkin ada dependensi yang hilang. Lacak kesalahan dan instal dependensi yang hilang. Punyaku adalah nodemon, yang aku perbaikinpm i nodemon -g


4
Saya tidak memiliki folder / WebCompiler di folder / TEMP saya seperti yang disarankan oleh beberapa posting lain di sini, jadi saya menjalankan baris perintah ini dan tampaknya telah memperbaiki masalah tersebut.
AppDreamer

13

Kelanjutan dari jawaban di atas .

Memiliki "kesalahan plugin" yang sama dengan @MehrdadBabaki. Saya mencopot kompiler web, menghapus folder AppData WebCompiler yang disebutkan di atas, lalu membuka kembali VS2019 dan menginstal ulang kompiler web.

LALU saya pergi ke folder WebCompiler lagi dan melakukan npm i autoprefixer@latest npm i caniuse-lite@latestdannpm i caniuse-lite browserslist@latest


cukup perbarui autoprefixer, caniuse-lite, daftar browser bagus untuk saya
cwhsu

10

npm --depth 9999 updatememperbaiki masalah untuk saya - tampaknya karena package-lock.jsonbersikeras pada versi yang sudah ketinggalan zaman.


12
Bahkan npm --depth 99 update caniuse-lite browserslistdisebabkan JavaScript heap out of memorydalam proyek saya, tetapi npm --depth 20 update caniuse-lite browserslistberjalan cepat dan menyelesaikan kesalahan dalam kasus saya.
Alexandr Nil

6

Dalam kasus saya, saya menghapus caniuse-lite, browserslistfolder dari node_modules.

Kemudian saya mengetik perintah berikut untuk menginstal paket.

npm i -g browserslist caniuse-lite --save

bekerja dengan baik.


2
Kami harus menambahkannpm i browserslist caniuse-lite --save
licik

3

Menghapus node_modulesdan package-lock.jsondan npm imemecahkan masalah bagi saya.


3
menghapus package-lock.json dapat mengakibatkan beberapa kesalahan perubahan kerusakan jika Anda memiliki sejarah panjang instalasi paket, misalnya proyek yang bekerja dan dikembangkan selama lebih dari satu tahun dan memiliki paket yang memiliki banyak ketergantungan tingkat 3 dapat dibuat melanggar perubahan
kafinsalim

2

Seperti disebutkan dalam jawaban Scott Kuhl, masalah ini disebutkan di https://github.com/madskristensen/WebCompiler/issues/413

Bagi saya, menjalankan perintah npm i caniuse-lite- browserslisthanya berfungsi sekitar 1/2 hari sebelum itu menjadi masalah lagi.

Solusi berikut, yang disebutkan dalam posting, bekerja jauh lebih baik. Ini memperbarui file node.js sehingga digunakan console.logsebagai pengganti console.warnsaat mengembalikan kesalahan ini.

Anda dapat memperbarui file ini secara manual yang terletak di C: \ Users \ [Username] \ AppData \ Local \ Temp \ WebCompiler [VersionNumber] \ node_modules \ browserlist

Atau, agar dilakukan secara otomatis, tambahkan berikut ini ke file .csproj Anda dengan:

  1. Klik kanan pada file proyek dan pilih "Unload Project"
  2. Edit file .csproj
  3. Tempel berikut ini ke dalam file proyek. Saya menempelkannya di bagian akhir file, sebelum </Project>tag akhir dan sebelum paket kompiler web build diimpor.
    <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. Muat ulang proyek kembali ke dalam solusi.

Terima kasih! Ini adalah perbaikan terbaik untuk saya. Perbaikan di atas akan menjadi usang setiap hari!
Bradly Bennison

2

Saya telah memperbaiki masalah ini dengan melakukan, langkah demi langkah:

  1. menghapus node_modules
  2. hapus package-lock.json,
  3. Lari npm --depth 9999 update
  4. Lari npm install

Berhati-hatilah package-lock.jsonsaat melepas karena dapat menyebabkan perubahan yang merusak dan harus dihindari.
Liam

1

Saya memiliki masalah yang sama juga perintah ini bekerja untuk saya

npm i autoprefixer@latest

Ini secara otomatis menambahkan ketergantungan package.jsondan package-lock.jsonfile seperti di bawah ini:

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

...

}

1

Saya tidak yakin di mana masalah saya, tapi saya yakin itu karena saya menggunakan paket global yang sama dari npm dan Yarn.

Saya mencopot semua paket global npm, lalu ketika menggunakan perintah benang sekali lagi, masalahnya hilang.

Untuk melihat paket global diinstal ...

untuk npm:

npm ls -g --depth=0

untuk Benang:

yarn global list

Saya kemudian menghapus setiap paket yang saya lihat di daftar npm, menggunakan:

npm uninstall -g <package-name>

1

Jawaban dari @Alexandr Nil aman, dan efektif untuk saya

Saya menulis sebagai jawaban lengkap karena mudah untuk melewatkan komentarnya.

npm --depth 20 update caniuse-lite browserslist 

Ini bagus karena:

  1. Tidak ada penghapusan package-lock.json. Menghapus yang membuat Anda rentan terhadap banyak paket yang ditingkatkan dengan perubahan yang merusak.

  2. Ini eksplisit dan sangat terbatas pada hal-hal yang akan diperbarui.

  3. Ini menghindari kedalaman yang sangat besar dari 99 atau 9999 yang akan bekerja pada beberapa proyek dan sistem, tetapi tidak pada yang lain. Jika Anda membatasi kedalaman pada angka yang terlalu kecil, itu tidak akan merusak apa pun. Anda dapat meningkatkan kedalaman dan mencoba lagi, hingga proyek berhasil dikompilasi.


0

Banyak yang menyarankan Anda untuk menghapus package-lock.jsonatauyarn.lock . Ini jelas ide yang buruk!

Saya menggunakan Yarn dan saya bisa memperbaiki masalah ini dengan hanya menghapus entri caniuse-dbdan caniuse-litedi saya yarn.lockdan melakukan ayarn .

Tidak perlu merusak fungsi utama lockfile dengan menghapusnya.


-1

Saya menurunkan versi node dari 12 menjadi 10

EDIT

Kesalahan ini terjadi pada saya karena saya menggunakan node versi 12. Ketika saya menurunkan versi ke versi 10.16.5 kesalahan ini berhenti. Error ini terjadi di local env saya, tapi pada prod dan staging tidak terjadi. Dalam prod dan versi node staging adalah 10.x jadi saya hanya melakukan ini dan saya tidak perlu memperbarui paket apa pun di package.json saya


2
Selamat datang di SO! Saat Anda memposting jawaban, meskipun benar, coba jelaskan sedikit.
David García Bodego

Ini bukan jawaban yang buruk ... cukup edit sedikit dan selesai.
David García Bodego

-1

Untuk memperbaiki masalah Anda dapat mengetikkan perintah di bawah ini:

'pembaruan npm -g'


-1

Jika Anda menggunakan benang:

yarn upgrade

Bantuan untukku


-1

Solusi minimal yang berhasil untuk saya untuk proyek saat ini

  • Sebuah proyek buat-reaksi-aplikasi
  • Ubuntu / * nix
  • 2020
  • Simpul 14.7

hapus node_modules/browserslistdirektori dalam proyek

sekarang

npm run build

tidak lagi menghasilkan pesan itu


Jika Anda baru saja menghapus direktori, apa yang terjadi lain kali Anda npm install/ npm ci?
jonrsharpe

Sebenarnya saya kemudian mengalami masalah dengan css perfix, akhirnya saya memperbarui aplikasi buat-buat untuk proyek itu dan semuanya baik-baik saja.
Michael Durrant

-1

Di Mac, saya menghapus node_modules dan package-lock.json, lalu menjalankan npm install dan memperbaiki masalah saya.


1
Seperti disebutkan di atas, berhati-hatilah saat melepas package-lock.json. Hal ini dapat menyebabkan perubahan yang merusak dan harus dihindari.
Liam

-3

Dalam kasus saya ini berfungsi dengan baik ...

sudo npm i -g browserslist caniuse-lite


2
Sangat disarankan untuk tidak menggunakan sudodengan npm install -gkarena ini dapat menyebabkan masalah izin. Jika Anda tidak dapat menginstal modul secara global, ini memang disebabkan oleh masalah izin yang sudah ada. Pencarian SO akan membantu dengan cara mengatasinya.
Brady Dowling
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.