I keep getting this warning message whenever I try to compile my SCSS files:
Browserslist: caniuse-lite is outdated. Please run next command npm update caniuse-lite browserslist
I already tried running the suggested command npm update caniuse-lite browserslist but the warning still appears. I also tried these solutions:
Removed the entire node_modules folder and ran npm install again
Used npm update to update all packages
Reinstalled both autoprefixer and browserslist packages
Manually updated package versions in package.json
None of these worked. However, when I remove this configuration from my compilerconfig.json file:
"settings": {
"prefixOptions": "> 2%"
}
The compilation works without any issues. This makes me think the problem is connected to the autoprefixer setup. Has anyone encountered this issue before and found a working solution?
This warning typically occurs when your local browserslist database is significantly out of date compared to what your build tools expect. The issue with your prefixOptions configuration suggests that autoprefixer is trying to query browser usage statistics but encountering version conflicts. I encountered this exact scenario on a project where clearing the npm cache resolved it. Run npm cache clean --force followed by deleting package-lock.json and node_modules, then reinstall everything. The cache can sometimes hold onto outdated browserslist data even after package updates. Alternatively, you might have multiple versions of browserslist installed across different dependencies. Check if any of your SCSS compilation tools or plugins are using their own bundled version of browserslist that isn’t getting updated through your regular npm commands.
had same isue last week. try running npx browserslist@latest --update-db instead of the npm update command. this worked for me when the regular update didnt fix it
The browserslist database gets updated frequently but your global installation might be pointing to an older version. What worked in my case was checking if browserslist was installed globally and updating that specifically with npm update -g browserslist. Sometimes the global version overrides the local project version causing this mismatch. You can verify which version is being used by running npx browserslist --version in your project directory. If that shows an old version, the global installation is likely interfering. Another thing to check is whether your SCSS compiler is using its own browserslist configuration file. Look for .browserslistrc or browserslist entries in package.json that might be conflicting with your compilerconfig.json settings. The fact that removing prefixOptions fixes it suggests the autoprefixer is referencing outdated browser data when trying to parse that specific query.