How do I update the Browserslist for use with WebCompiler in Visual Studio?

Question

I don't use node directly at all, but I do use Visual Studio with the "Web Compiler 2022+" extension. I wanted to use the autoprefixer option, so updated 'compilerconfig.json.defaults' in my website project to include:

 "sass": {
            "autoPrefix": "last 2 versions",
...

However, when I then Recompile the main scss file, I get an error:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

So I opened a command prompt and CD'd to the WebCompiler directory (%localappdata%\temp\WebCompilerXXX - in my case "C:\Users\[ME]\AppData\Local\Temp\WebCompiler1.14.11\")

and run npx update-browserslist-db@latest --update-db

I get these messages:

npm WARN cli npm v9.8.0 does not support Node.js v16.6.0. This version of npm supports the following node versions: `^14.17.0 || ^16.13.0 || >=18.0.0`. You can find the latest version at https://nodejs.org/.
npm WARN cli npm v9.8.0 does not support Node.js v16.6.0. This version of npm supports the following node versions: `^14.17.0 || ^16.13.0 || >=18.0.0`. You can find the latest version at https://nodejs.org/.
update-browserslist-db: Cannot find package.json. Is this the right directory to run `npx update-browserslist-db` in?

There is no "package.json" file in that directory:

It seems "package.json" files are inside individual directories in "node_modules".

Following another SO post, I then ran npm i npm-update-all -g in that same top-level WebCompiler directory, and get this message:

npm WARN cli npm v9.8.0 does not support Node.js v16.6.0. This version of npm supports the following node versions: `^14.17.0 || ^16.13.0 || >=18.0.0`. You can find the latest version at https://nodejs.org/.

changed 20 packages in 12s

Which seems to suggest a successful completion, but when I attempt to Recompile the file, I get the same Browserslist: caniuse-lite is outdated. error.

How can I get this browserslist updated? Thanks!

score 0 · Answer 1 · answered Jul 19 '23 at 15:35

I found a solution on the WebCompiler GitHub:

Add a .BAT file to "%localappdata%\temp\WebCompilerXX" which includes the following:

echo Installing packages...
call npm install --quiet ^
        babel@5.8.34 ^
        iced-coffee-script ^
        less ^
        less-plugin-autoprefix ^
        less-plugin-csscomb ^
        sass ^
        node-sass ^
        postcss@latest ^
        postcss-cli ^
        autoprefixer ^
        stylus ^
        handlebars ^
        > nul
call npm install --quiet > nul

Double-click to run the file.

How do I update the Browserslist for use with WebCompiler in Visual Studio?

1 Answers1