[all] Rushstack CI blocked by "browerslist update" warning

[elliot-nelson]

Summary

Looks like recent PR builds are failing due to some warnings (see this build).

--[ WARNING: heft-node-jest-tutorial ]-----------------------[ 8.29 seconds ]--

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

--[ WARNING: heft-sass-test ]-------------------------------[ 16.42 seconds ]--

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

It's not super clear how to fix this warning, running the suggested command in one of the affected projects doesn't work because there's not a lock file, and running it in the common/temp folder doesn't work because pnpm can't install packages there.

[octogonz]

This has come up a few times before in Zulip chat, for example:

browserslist --update-db

Browserlist Warning

It can be fixed by upgrading indirect dependencies. However fundamentally the browserslist hook is performing a nondeterministic check that will break everyone's ability to build all historical branches of your repo. This is really bad. In the past we recommended for people to avoid browserslist entirely, but that's not always feasible.

Let's use this incident to figure out the right way to disable the browserslist check, and then we can add it to the Rush FAQ.

CC @MickeyPhoenix whose team encountered this also IIRC

[octogonz]

The error is actually coming from this code in the browserslist NPM package:

browserslist/node.js

  oldDataWarning: function oldDataWarning (agentsObj) {
    if (dataTimeChecked) return
    dataTimeChecked = true
    if (process.env.BROWSERSLIST_IGNORE_OLD_DATA) return

    var latest = latestReleaseTime(agentsObj)
    var halfYearAgo = Date.now() - TIME_TO_UPDATE_CANIUSE

    if (latest !== 0 && latest < halfYearAgo) {
      console.warn(
        'Browserslist: caniuse-lite is outdated. Please run:\n' +
        '  npx browserslist@latest --update-db\n' +
        '  Why you should do it regularly: ' +
        'https://github.com/browserslist/browserslist#browsers-data-updating'
      )
    }
  },

[elliot-nelson]

Nice! So there is an env var that could be set.

[octogonz]

The root cause is that they are calling console.warn() instead of console.log(). Someone already pointed that out in issue browserslist/browserslist#361, but they fixed it by introducing this environment variable instead.

The fundamental conflict is that Rush considers console.warn() to be a warning, and warnings breaks CI builds. Having a warning arise due to clock measurements will cause developers to suddenly lose their ability to build old branches, which is a big deal for us.

If console.warn() cannot be eliminated, then perhaps Rush can hack around it by forcing BROWSERSLIST_IGNORE_OLD_DATA=1 for everyone by default. The behavior of Date.now() - TIME_TO_UPDATE_CANIUSE is incompatible with our use case.

@ai what do you think? Would you reconsider eliminating console.warn() in browserlist?

[octogonz]

So there is an env var that could be set.

We could also simply instruct Rush users to set BROWSERSLIST_IGNORE_OLD_DATA=1 themselves. But it's not a great experience. Every repo that encounters this will have to waste time investigating it and rediscovering the solution. And at HBO for example, we'll have to bulk-apply the BROWSERSLIST_IGNORE_OLD_DATA=1 to hundreds of pipeline files, and then make sure every future pipeline remembers to set it. The value of this validation is not worth that headache IMO.

[Faithfinder]

I would prefer if you didn't try to manage third-party libraries for me, that's unintuitive. Borwserslist isn't the only tool that does that, Prisma is similar, and honestly, even PNPM does that, it's just that it's not an issue during rush update (pnpm is .log, not .warn, I guess). I would put a warning in the docs saying "Some tools print update warnings, they usually provide an environment variable to silence it"

[Faithfinder]

Maybe with "here are the ones we know about" and put browserslist and prisma there

[ai]

I have an idea of not showing this warning in case where browsers query doesn't contain time related queries like last 2 versions.

How do you use Browserslist in this project? What is browsers query?

[octogonz]

In this particular repo, we don't use it at all actually. 🙂 It is coming in as an indirect dependency of other NPM packages such as webpack:

rushstack/common/config/rush/pnpm-lock.yaml

Line 17534 in 94e2aa7

browserslist: 4.16.6

[ai]

@octogonz lets me rephrase. Why is Browserslist calling in your stack? Do you compile JS sourced with Babel or use Autoprefixer? (I see these dependencies in lock file, but I am not sure what is this tool about)

[octogonz]

This GitHub repo is a monorepo for a bunch of different build tools, and it also includes some sample projects that are built by the tools. The browserlist package probably gets invoked in multiple different ways.

Looking at the first warning in the log above, heft-node-jest-tutorial is a simple Node.js project that does not use Webpack at all. I can try running it in a debugger and see exactly where browserlist gets loaded. In most cases it's likely to be via an API.

[octogonz]

For this one, looks like Jest is invoking Babel, and then Babel queries browserslist:

The query returns an empty array. The heft-node-jest-tutorial as no browser configuration itself and would never run in a web browser, but apparently Jest is still performing the queries.

[octogonz]

For comparison, here's how HBO's internal monorepo invokes browserslist:

import browserslist from 'browserslist';

function getTargetsFromQuery(query: string[]): string[] {
  try {
    return browserslist(query);
  } catch (error) {
    throw new Error(`Browsers list query for '${query}' failed: ${error.message}`);
  }
}

This is from a specialized tool that builds the 4 standardized polyfill bundles that are shared across all the different app projects and their library projects. This tool has its own JSON input files, and then it generates a query which is passed to browserslist.

So in both cases, a specialized tool is querying the browserslist API; there is no .browserslistrc. (However I'm sure plenty of other Rush consumers do use .browserslistrc in the normal way.)

[ai]

For the case of Jest BROWSERSLIST_IGNORE_OLD_DATA can be safely used. I personally, think that they should pass exact Node.js version to Babel and avoid calling Browserslist for default browsers list, since it reason less (but I am not sure how to fix it).

This outdated caniuse-lite warning is important for building web pages. People can avoid updating caniuse-lite for 2-3 years, which will lead to very old browsers in Babel and Autoprefixer and increase JS/CSS files by unnecessary polyfills and slow down the website.