'Why same browserslist option makes different target results

I'm using browserslist option on package.json in two projects. One is react, and the other is next.js project. But I could find when I put debug: true option on babel and check actual targets, I could see they are having different target results.

"browserslist": [
    ">0.25%",
    "android >= 4.2",
    "ios_saf >= 10",
    "and_chr >= 56",
    "ie 11"
  ]

I'm using option above. In next.js project the result is

{
  "android": "4.2",
  "chrome": "56",
  "edge": "97",
  "firefox": "96",
  "ie": "11",
  "ios": "10",
  "opera": "83",
  "safari": "13.1",
  "samsung": "16"
 }

However, the result from react project is

{
  "android": "4.2",
  "chrome": "49",
  "edge": "18",
  "firefox": "74",
  "ie": "11",
  "ios": "10",
  "opera": "67",
  "safari": "12.1",
  "samsung": "4"
}

How same browserslist option can have different target output?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Why same browserslist option makes different target results

Sources

Related Questions