Unable to compile sass files - browserslist says caniuse-lite is outdated

[Fandermill]

Installed product versions

• Visual Studio: 2022 Professional (v17.2.0)
• This extension: 1.14.7

Description

The extension is unable to compile sass files, probably because of an outdated node package caniuse-lite or browserslist.

Steps to recreate

1. Right-click on the compilerconfig.json file and choose WebCompiler > Re-compile all files

Current behavior

When trying to compile a scss file, an error pops up in the Error List pane of Visual Studio:

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

Executing the given command in Windows Terminal / Powershell tells me it cannot find package.json. The installation path of the extensions at C:\Users\USERNAME\AppData\Local\Temp\WebCompiler1.14.7 does indeed not contain a package.json.

I don't use node and/or npm manually (and that's why I use this extension). I have no clue on how to update browserslist or caniuse-lite for this extension.

Expected behavior

Compile the sass files succesfully :)

[atollis]

I just ran into the same issue

[failwyn]

I'm unable to reproduce this issue, could you post your compilerconfig.json and compilerconfig.json.defaults so that I can try to more closely replicate your configuration?

[Fandermill]

Thanks for your reply!

Here is my compilerconfig.json.defaults:

{
  "compilers": {
    "less": {
      "autoPrefix": "",
      "cssComb": "none",
      "ieCompat": true,
      "strictMath": false,
      "strictUnits": false,
      "relativeUrls": true,
      "rootPath": "",
      "sourceMapRoot": "",
      "sourceMapBasePath": "",
      "sourceMap": false
    },
    "sass": {
      "autoPrefix": "",
      "includePath": "",
      "indentType": "space",
      "indentWidth": 2,
      "outputStyle": "expanded",
      "Precision": 5,
      "relativeUrls": true,
      "sourceMapRoot": "",
      "lineFeed": "",
      "sourceMap": false
    },
    "stylus": {
      "sourceMap": false
    },
    "babel": {
      "sourceMap": false
    },
    "coffeescript": {
      "bare": false,
      "runtimeMode": "node",
      "sourceMap": false
    },
    "handlebars": {
      "root": "",
      "noBOM": false,
      "name": "",
      "namespace": "",
      "knownHelpersOnly": false,
      "forcePartial": false,
      "knownHelpers": [],
      "commonjs": "",
      "amd": false,
      "sourceMap": false
    }
  },
  "minifiers": {
    "css": {
      "enabled": true,
      "termSemicolons": true,
      "gzip": false
    },
    "javascript": {
      "enabled": true,
      "termSemicolons": true,
      "gzip": false
    }
  }
}

And this is my compilerconfig.json:

[
  {
    "outputFile": "Content/Path/To/File/_output/MainStyles.css",
    "inputFile": "Content/Path/To/File/MainStyles.scss",
    "options": {
      "autoPrefix": "last 2 versions"
    }
  }
]

I guess it's the autoPrefix option that triggers the use of browserslist and/or caniuse-lite.

[failwyn]

I'm looking into this, but as a workaround you can add an Environment Variable to stop it from throwing the error.

BROWSERSLIST_IGNORE_OLD_DATA=true

I just tested this and it worked as soon as I closed and reopened Visual Studio.

I have not tested, but you can apparently set the environment variable in Visual Studio as well.

Is anyone familiar with how often BrowserList has to be updated to avoid this? Is there a way to disable the Old Data error through command line arguments?

This was apparently an issue in the 2017 Version of Web Compiler as Well #413

[duncancoppedge]

Thanks @failwyn for looking into it and for picking up the WebCompiler project. Much appreciated.

Wish I could be more help but I poked around in browserlist and the node_modules folder and I'm not sure what the fix is here. Autoprefixer, browserlist, and caniuse-lite itself are the only package.json's with caniuse-lite references.

Added the _BROWSERSLIST_IGNORE_OLDDATA=true to my environment variables and it's compiling again which is all I needed for today.

[failwyn]

I’m glad to hear you’re up and running! I’ll do more research on this to find a legitimate fix, otherwise I’ll make a note to update it for every release; ideally I’d like to find a way to have it automatically update when the extension loads.

[Fandermill]

Ah yes, I forgot to express my gratitude for picking up the project. It is indeed much appreciated! Adding the environment var seems to work for now.

I had this problem with Kristensen's version too, with a slightly different error message though. I made a fixing .bat file and executed it every time the problem rose. (now that I'm thinking about it; I might have found it somewhere in the issue discussions, can't remember). It just reinstalls the caniuse-lite and browserslist packages in the webcompiler dir.

@ECHO OFF

ECHO NPM packages 'caniuse-lite' and 'browserslist' will be removed

IF EXIST "%TEMP%/WebCompiler*" (

    FOR /d %%x in ("%TEMP%\WebCompiler*") DO (
        cd %%x

        ECHO Deleting node package folder 'caniuse-lite'
        rd /s ".\node_modules\caniuse-lite"

        ECHO Deleting node package folder 'browserslist'
        rd /s ".\node_modules\browserslist"

        ECHO Installing these node packages again...
        npm i caniuse-lite browserslist
    )

    ECHO SUCCESS

) ELSE (
    ECHO WebCompiler folder does not exist at %TEMP%
)

ECHO End program

PAUSE

This procedure doesnt work anymore, but my knowledge on how node or npm works is very limited. But it might be helpful.

[adrianhall]

I managed to get this updated by the following:

Cd ~/AppData/Local/Temp/WebCompiler1.14.8/node_modules/browserslist
Node cli.js —update-db

No idea how that directory gets built (I’m assuming by the WebCompiler extension), but if you add a package.json file into the WebCompiler1.14.8, then you can at least `cd …/WebCompiler1.14.8; npx browserslist —update-dbl and it will do the right thing.

I suspect something similar will have to be done with the BuildWebCompiler2022 NuGet package. I’ll keep digging.

[adrianhall]

... and my thought is to do the following changes in https://github.com/failwyn/WebCompiler/blob/master/src/WebCompiler/Node/prepare.cmd

1. Add npm.cmd and npx.cmd to the Node directory.
2. Add the package.json and package-lock.json that generates the node_modules (nothing wrong with distributing the node_modules directory for offline usage, but you may want to run npm install to pick up the latest changes to the module)
3. Add the following to the prepare.cmd

npm.cmd install
npx.cmd browserslist --update-db

That will at least update the database when the package is installed (along with picking up a lot of security updates for existing packages). Since we are now distributing the package-lock.json, we can skip the npm.cmd install if you like.

In the SASS compiler (around https://github.com/failwyn/WebCompiler/blob/master/src/WebCompiler/Compile/SassCompiler.cs#L103) add a call to UpdateBrowsersList() (which is a new method).

The UpdateBrowsersList will check the date that the caniuse-lite database was written. If older than one month, do the npx command before continuing. This ensures the database is always up to date.

Personally, I'd much rather have a working package directory that I can just 'npm install' when appropriate, stored in a place where I can get to (Temp doesn't seem right to me)

[MichelJansson]

None of the solutions that updates the browserslist was working for me, but running the commands that was initially used to generate the node_modules folder worked.

1. Make sure npm is installed and available.
2. open cmd.exe (cmd to allow the below snippet to be easily pasted into the terminal)
3. cd %localappdata%\Temp\WebCompiler*
4. Run this section from the build.cmd script to re-install all modules:

   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

After this, we also have a package.json file so the normal update should hopefully work.

[pauldbentley]

None of the solutions that updates the browserslist was working for me, but running the commands that was initially used to generate the node_modules folder worked.

1. Make sure npm is installed and available.
2. open cmd.exe (cmd to allow the below snippet to be easily pasted into the terminal)
3. cd %localappdata%\Temp\WebCompiler*
4. Run this section from the build.cmd script to re-install all modules:

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

After this, we also have a package.json file so the normal update should hopefully work.

I ran into this issue today. Running the above solved this problem. Would there be a way for the extension to do this automatically?

[failwyn]

I’ll look into having a menu to update the node modules.