16

I have recently started getting this error on a Angular 8 project (node v10.16.0) I am working on. Running npm update caniuse-lite browserslist did nothing

So I removed package-lock.json, removed node_modules and ran npm install, but browserlist file has gone. Again when I run ng build, I get same message: Browserslist: caniuse-lite is outdated. Please run next command npm update

I see this post on same topic: Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist` However, it talks about WebCompiler and autoprefixer and I have no idea of those. Please guide

SilverFish
  • 1,014
  • 6
  • 28
  • 65
  • Q: Did you create this Angular project with Visual Studio? Q: What happened when you simply followed the instructions and ran `npm update caniuse-lite browserslist`? – FoggyDay Dec 16 '19 at 18:42
  • 1
    Yes, angular project is using Visual Studio 2017. Nothing happened when I use npm update caniuse-lite browserslist. Nothing installs ... – SilverFish Dec 16 '19 at 18:49
  • Since browserlist file is gone after I did fresh npm install (caniuse-lite is there), do you recommend I should run npm in browserlist? – SilverFish Dec 16 '19 at 18:54
  • i just got the same problem. in phpstrom it tells me to run ``npm update`` but this didn't solve the problem, just made my typescript version to high for angular 8. – BlakkM9 Jan 05 '20 at 08:23
  • 1
    I'm having this same issue also, Angular 8 using Visual Studio code although I'm not sure why the editor would be causing this conflict. Any answers on this yet? We're supposed to release a huge new feature this week and of course now our app wont build. I see several of our node_modules using browserlist – HomeBrew Jan 06 '20 at 07:43
  • please add your package.json here in question – Akash Jan 07 '20 at 06:47
  • The issue seems to have resolved itself for me this morning after updating all packages with `npm update` – nullmn Jan 09 '20 at 07:20

2 Answers2

14

TLDR: (may seem counter-intuitive without the explanation)

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

Explanation:

This warning msg ("canisuse-lite is outdated, please ....") is output by scripts in browserslist during build/start if it finds the installed version of caniuse-lite is older than 2 versions from the current version. If nothing in your project changed and you suddenly see this msg when starting or building your project, it probably means there was a recent version update to caniuse-lite.

Unfortunately, the text msg that browserslist displays is only helpful if you installed caniuse-lite as a dependency of your project. Most likely, you did not. So when you run the suggested 'npm update caniuse-lite' or 'npm update 'caniuse-lite@latest' (or 'npm install'), npm doesn't see that package listed in your package.json dependencies, so it ignores the request.

How did those packages become dependencies then? When your project was created (maybe with app angularapp or create-react-app or similar for your framework), npm installed browserslist as a dependency of its needed tools, not as one of your project's dependencies. At the same time, caniuse-lite was installed as a dependency of browserslist. Later when the project was updated, a package-lock.json file was created which locks all dependencies to a specific version.

If you were able to update the version information in the list of dependencies in package-lock.json, then running 'npm install' would update these packages in node_modules. You should not edit package-lock.json manually. Instead, the best way to do that is:

  1. Temporarily make these packages a dependency of your project:

    npm install caniuse-lite browserslist

    In addition to updating the package to the latest version, this updates the dependency list in both package.json and (most importantly) package-lock.json.

  2. Remove these packages as direct dependencies of your project:

    npm uninstall caniuse-lite browserslist

    Since these packages are used by other dependencies, they are not removed from node_modules. Only package.json is updated to remove them as a project dependency.

  3. Commit package-lock.json. Anyone else can now just run 'npm install' to get the updated two packages from list of sub dependencies in package-lock.json, and stop the warning msg.

jdh
  • 1,637
  • 14
  • 12
  • 1
    I have been tried your solution but I still have a warning with this message (Browserslist: caniuse-lite is outdated. Please run next command `npm update`) and with a clean angular setup. – Alexander Kushnir Jan 08 '20 at 20:35
  • @AlexanderKushir - after doing the install in step 1, look in node_modules for browserslist and caniuse-lite to check if their the version in their individual package.json was updated (should be 1.0.30001019 for caniuselite and 4.8.3 for browserslist, as of today). The new version of browserlist (4.8.3) should only complain if canisuelite wasn't updated. Is it possible you have a caching server set in .npmrc that is not updating these two packages? (If you are, try temporarily renaming .npmrc before doing the install?) – jdh Jan 08 '20 at 21:47
  • 1
    I only had to do all that for ``caniuse-lite`` and the message is gone – MoonStom Jan 08 '20 at 22:08
  • @MoonStom - if you only install caniuse-lite, you are adding that as a dependency of you app, which is not accurate. The problem is in npm and browserslist. Once those are fixed, your app shouldn't be dependent on caniuse-lite. – jdh Jan 08 '20 at 22:27
  • I get `npm ERR! must provide string spec` – John Targaryen Feb 13 '22 at 20:33
12

Solved caniuse-lite outdated problem by running below commands.

npm cache clean  # optional
npm install caniuse-lite@latest --save
Vishnudev Krishnadas
  • 10,679
  • 2
  • 23
  • 55
Dipten
  • 1,031
  • 8
  • 16
  • `npm cache clean` doesn't work directly as it is handled by npm automatically in the latest versions. Do you want us to use `--force`? If yes, please explain why we should be nuking the cache. – Vishnudev Krishnadas Jan 08 '20 at 07:26
  • 1
    npm cache clean is not required one. you can directly run `npm install caniuse-lite@latest --save` – Dipten Jan 08 '20 at 09:50
  • 3
    Adding caniuse-lite to your app (via package.json bloat) is not a good idea, since it's not a dependency of your app - only your npm toolset. See longer explanation below. Also '--save' is redundant as it's now the the default action with install. – jdh Jan 08 '20 at 15:52
  • This installs caniuse-lite successfully for me, yet I still get the same error. – nullmn Jan 08 '20 at 17:08
  • I tried with node 10.x and it fixed. please check your node version. – Dipten Jan 09 '20 at 05:44
  • OK well I did NOT do the first step and did do the second and my error message has disappeared. I skipped the first step because it nuked other stuff that I had to modify slightly (try catch blocks where catch (error) {} was just catch {} - not my code though) – Allen Nov 15 '20 at 14:44
  • Doesn't work, on install I get `npm ERR! must provide string spec` – John Targaryen Feb 13 '22 at 20:33