Why am I getting a caniuse-lite outdated error when compiling SCSS?

Other Questions NPM
1

I’m having trouble with my SCSS files. When I try to compile them, I get this error:

Browserslist: caniuse-lite is outdated. Please run next command `npm update caniuse-lite browserslist`

I’ve tried a bunch of things to fix it:

  • Ran the suggested command
  • Deleted node_modules and reinstalled
  • Updated everything with npm update
  • Reinstalled autoprefixer and browserslist

Nothing worked. The weird thing is, if I remove this from my compilerconfig.json:

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

It works fine. So it might be an autoprefixer issue. I even tried manually updating the package version in package.json and reinstalling, but no luck.

Any ideas what could be causing this? I’m stuck and not sure what to try next. Thanks for any help!

2

I’ve dealt with this issue before, and it can be quite annoying. One thing that often gets overlooked is the npm version itself. Make sure you’re running the latest version of npm by executing npm install -g npm@latest. This can sometimes resolve compatibility issues with package updates.

Another approach that worked for me was to explicitly install the latest version of caniuse-lite separately. Try running npm install caniuse-lite@latest in your project directory. This forces npm to use the most recent version, which might bypass the outdated warning.

If you’re using a CI/CD pipeline, check if your build environment is caching node_modules. Outdated caches can cause persistent issues like this. Clearing the cache or forcing a fresh install in your CI configuration might help.

Lastly, if all else fails, consider creating a new package-lock.json file. Delete the existing one and run npm install again. This regenerates all dependencies from scratch, potentially resolving any lingering conflicts.

3

I encountered a similar issue a while back. It’s frustrating when these errors pop up, especially with dependencies. In my case, the problem was related to global vs. local package conflicts. Try running npm ls caniuse-lite to see if you have multiple versions installed. If so, you might need to clean up your dependencies. Also, check if you’re using a global installation of any related packages that could be interfering.

Another thing that worked for me was clearing the npm cache with npm cache clean --force and then doing a fresh install. Sometimes npm gets stuck with outdated cache info.

If none of that works, you might want to look into your project’s browserslist configuration. It could be that your settings are conflicting with the latest caniuse-lite data. Consider updating your browserslist query or checking if there’s a mismatch between your project’s target browsers and the caniuse-lite database.

Hope this helps you troubleshoot further!

4

yo, had this prob too. suuuper annoying! try this: delete ur package-lock.json and node_modules folder. then run npm install again. sometimes that fixes weird dependency stuff. if not, maybe check ur global npm packages? they can mess things up. gl fixing it!