Broken babel configuration, target browsers not working as documented.

[rvalle]

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

According to the documentation in order to customize Babel configuration .babelrc or babel.config.json:

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ],
  "presets": [
    [
      "babel-preset-gatsby",
      {
        "targets": {
          "browsers": [">0.25%", "not dead"]
        }
      }
    ]
  ]
}

targets.browsers will not be used. babel-preset-gatsby source code sources targets from .cache/babelState.json which will contain different values to the ones set in this configuration file

Reproduction Link

https://github.com/gatsbyjs/gatsbyjs

Steps to Reproduce

1. create babel-config.json as stated in documentation
2. modify target.browsers to [">0.40%", "not dead"]
3. perform a gatsby build or develop
4. cat cache/babelState.json and check what browserslist includes ...

Expected Result

Browser list in the caced babel state should equal the configured browserlist in babel-config.json as that is the effective target used by babel

Actual Result

a different targets browsers are displayed, and no idea where they are coming from.

Environment

System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 4800H with Radeon Graphics
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Firefox: 99.0
  npmPackages:
    gatsby: ^4.4.0 => 4.12.1 
    gatsby-plugin-meta-redirect: ^1.1.1 => 1.1.1 
    gatsby-plugin-react-helmet: ^5.11.0 => 5.12.1 
  npmGlobalPackages:
    gatsby: 4.4.0

Config Flags

no flags

[rvalle]

looks like the fallback is always returned despite the configuration: https://github.com/gatsbyjs/gatsby/blob/7d41a985669438e3504987968ed326eb2fd42bca/packages/gatsby/src/utils/browserslist.ts#L24

[rvalle]

the browserlist in package.json is also ignored

only setting the browserlist in .browserslistrc seems to be working now.

[aaronadamsCA]

Can confirm - even in a monorepo, .browserslistrc at the monorepo root is the only thing that has any effect. targets has no effect, whether using string, array, or object format, as a preset option or at the top level of the config.

[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! 💪💜

[tujoworker]

Its not solved. But will once PR is merged.

[macklaud002]

Its not solved. But will once PR is merged.

Merge please :pleading_face: