Browserslist config not working for old versions browsers

[lararthur]

Preliminary Checks

• [X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• [X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Our team has been trying to achieve a maximum range of browsers support through polyfills, generated by babel and configurated by browserslist in .babelrc file, when using babel-preset-gatsby.

The goal is to make our application not break or accuse errors when using rest/spread operators. But the outcome is always an Unexpected token ... in the console when using an old Chrome (v 50.0).

The config at .babelrc follows:

{
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": ["cover 100% in BR"]
        }
      }
    ]
  ]
}

Although trying different approaches of configuration like:

• "browserslist": ["cover 100% in BR"] on package.json
• cover 100% in BR in a .browserslistrc file
• each config separately, combining two of each possible combinations, or all together.

Seaching in the application, we still have some remaining reference to this [">0.25%", "not dead"] browserslist config such as:

• getBrowsersList function, on /node_modules/gatsby/dist/utils/browserslist.js
• browserslist.js.map file on /node_modules/gatsby/dist/utils/browserslist.js.map

It seems that there is a problem with the fallbacks when setting a custom range of browsers, since the default config always remains.

Reproduction Link

https://codesandbox.io/s/cranky-fire-lv2fre

Steps to Reproduce

1. install babel-preset-gatsby as a dev dependency
2. create .babelrc file
3. modify target.browsers to ["cover 100% in BR"]
4. perform a gatsby build
5. serve the public folder ...

Expected Result

Application running in Chrome v50.0 without console errors.

Actual Result

Chrome still pointing an Unexpected token ... error due to usage of the spread operator.

Most likely, polyfills are still being generated considering the [">0.25%", "not dead"] config.

Environment

System:
    OS: macOS 12.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
    Shell: 3.2.57 - /bin/sh
  Binaries:
    Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.15.4/bin/yarn
    npm: 8.1.4 - ~/.nvm/versions/node/v14.15.4/bin/npm
  Browsers:
    Chrome: 106.0.5249.119
    Firefox: 104.0.2
    Safari: 16.0
  npmPackages:
    gatsby: ^4.24.4 => 4.24.4 
  npmGlobalPackages:
    gatsby-cli: 4.24.0

Config Flags

no flags

[Malatisahoo]

If you will use opera gx

[LekoArts]

Please try this again with the latest Gatsby (npm install gatsby@next)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[mrahils]

@lararthur , were you able to find a fix for this? The issue still exists Unexpected token .... Looks like transpilation issue due to spread operator.

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[lararthur]

@mrahils i have nothing new on that, sorry :(

Still hoping for a good soul to come and help us

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[gustavlarson]

We are experiencing this issue as well, using latest version of gatsby (5.10.0). We have tried the same approach as @lararthur, varisous combinations of .babelrc, .browserslistrc and package.json.

Let me know if there is anything that I can add to make this issue easier to track down. It is currently a rather problematic issue for us.

[808vita]

https://babeljs.io/docs/babel-plugin-transform-object-rest-spread I think this is relevant here .

like @lararthur mentioned polyfill is not kicking in (evident from the error ).

please check if babel has the plugin installed and configured . this is the only lead I have for you guys .

[808vita]

https://www.npmjs.com/package/babel-preset-gatsby

not sure if spread related package is bundled in this . (it is not listed so..)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[kristerlooga-bolt]

Sadly this problem still persists. Although @babel/plugin-transform-object-rest-spread is not listed under babel-preset-gatsby, then @babel/preset-env is listed and it contains @babel/plugin-transform-object-rest-spread in it.