Browserslist: question: getting error process not defined in angular 2

[artoodeeto]

hello. Im trying to figure out how to use this package on our application but for some reason im getting an error process not defined

im trying to use it this way.
this is just test run.

import browserslist from "browserslist";
console.log(browerslist(`last 2 #{currentBrowser} versions`));

what we're trying to do is query the last 2 stable versions.

we also have this on our package.json

"browserslist": [
    "last 2 chrome versions",
    "last 2 firefox versions",
    "last 2 safari versions"
  ],

How do you use this? some weird answer that I get on SO was to run this on node?

[Sparksx]

Hello,
I jump above the problem by adding:

window.process = window.process || {};
window.process.env = window.process.env || {};
window.process.env.BROWSERSLIST_DISABLE_CACHE = false;

It's a really ugly solution...
I'm in the same case as you, i need a better solution

[ai]

1. Are you adding Browserslist to the client-side bundle? Why? (There are only few rare good use cases if you won't just show “Update your browser” there is a much better solution)
2. What bundler do you use? Browserslist has browser field in package.json which avoids using Node.js API (like process) if you pack Browserslist for client-side usage. Seems like your bundler doesn’t support it.

[artoodeeto]

Thank you for responding guys.

@Sparksx hello I had the same thing. I used that and just followed this.

@ai hello. where using angular 8 and I think there not supporting shims.

so we're just using this to detect browser version. we support till last 5 versions then we tell client to use or download newest version of chrome, safari, or firefox.

Yea this is weird solution but this is my task. Is there other way?

[ai]

@artoodeeto sending Browserslist to the client is bad idea because of the client-side bundle size and it affect on performance.

Look at “Tools” section in our docs. We have a few good alternatives, which work with User Agent. I recommend server-side solutions like browserslist-useragent-ruby. But if can't do it with server-side code, you can use browserslist-useragent-regexp which will compile your Browserslist config to RegExp for User Agent.

Does it fit your task?

[artoodeeto]

@ai Thank you for this much love response sir. Will try to discuss this with my senior so we can both decide. I have a question though. We are using caniuse-api package and they have this method

function getLatestStableBrowsers() {
  return browserslist("last 1 version")
}

so basically they're using your package to query browser. Do you think this will have the same effect on us bundle size wise? and also the data returns like this

["and_chr 79", "and_ff 68", "and_qq 1.2", "and_uc 12.12", "android 76", 
                  "baidu 7.12", "bb 10", "chrome 79", "edge 79", "firefox 72", "ie 11",
                  "ie_mob 11", "ios_saf 13.2", "kaios 2.5", "op_mini all", "op_mob 46",
                  "opera 64", "safari 13", "samsung 10.1"];

first I get the client browser, then im looping thru each one of the returned data and cheking them with string prototype includes and splitting them and getting the second element which the is version number. My question is, is this data reliable? Can I expect it to be this way always?

[ai]

Do you think this will have the same effect on us bundle size wise?

Yes. According to bundlephobia adding caniuse-api to your client-side bundle will add 500 KB of JS to your bundle.

I recommend using bundlephobia before adding any new library to your project. Also, there is nice extension for text editors to show the cost of your libraries.

Also Size Limit is a great tool for CI to warn you about unexpected bundle size increases.

so basically they're using your package to query browser.

Note that last 1 version doesn’t tell you current user browser. It gives you just latest released versions according to Can I Use.

My question is, is this data reliable? Can I expect it to be this way always?

Yes, it is always NAME SPACE VERSION format.

---

If you like our support consider talking with your manager about funding our security refactoring.

[artoodeeto]

@ai thank for this super much love response sir. appreciate the help and new information. Definitely, will let them know about this. thank you again.