Skip to content

[Bug]: babel/preset-env - document says esmodules is intersected, build warning says its ignored. #15371

Open
babel/website
#2714
@epreston

Description

@epreston

💻

  • Would you like to work on a fix?

How are you using Babel?

babel-loader (webpack)

Input code

console.log('hello world!');

Configuration file name

.babelrc.json

Configuration

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "bugfixes": true,
        "targets": {
          "browsers": "Edge >= 108, Firefox >= 108, FirefoxAndroid  >= 107, Chrome >= 108, ChromeAndroid >= 108, Safari >= 16.1, iOS >= 16.1, not dead",
          "esmodules": true
        },
        "useBuiltIns": "usage",
        "corejs": "3.27.2"
      }
    ]
  ]
}

Current and expected behavior

Documentation for options "targets" says:

Please note: when specifying both browsers and the esmodules target, they will be intersected.

However, when building the following message is displayed.

@babel/preset-env: esmodules and browsers targets have been specified together.
browsers target, Edge >= 108, Firefox >= 108, FirefoxAndroid >= 107, Chrome >= 108, ChromeAndroid >= 108, Safari >= 16.1, iOS >= 16.1, not dead will be ignored.

Which is correct ? Is it intersected or ignored ?

Environment

Babel Versions:

  • "@babel/core": "^7.20.12",
  • "@babel/preset-env": "^7.20.2",
  • "babel-loader": "^9.1.2",

Node Versions:

  • npm 8.19.3
  • node 18.13.0

OS:

  • WIndows 10
  • OSX (latest)

Possible solution

Depending on which is correct, update documentation or warning message in babel/preset-env

Additional context

I would like rely on the intersection behaviour in the future, if possible.

Activity

babel-bot

babel-bot commented on Jan 26, 2023

@babel-bot
Collaborator

Hey @epreston! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

epreston

epreston commented on Jan 26, 2023

@epreston
Author

Thank you babel-bot. We need to update the documentation or tool.

nicolo-ribaudo

nicolo-ribaudo commented on Jan 26, 2023

@nicolo-ribaudo
Member

It should definitely be intersected, I'll check what the code does.

nicolo-ribaudo

nicolo-ribaudo commented on Jan 26, 2023

@nicolo-ribaudo
Member

If you specify your targets at the top level of your config (so in the generic Babel options — https://babeljs.io/docs/en/options#targetsesmodules), esmodules will be intersected with browsers:

{
  "targets": {
    "browsers": "Edge >= 108, Firefox >= 108, FirefoxAndroid  >= 107, Chrome >= 108, ChromeAndroid >= 108, Safari >= 16.1, iOS >= 16.1, not dead",
     "esmodules": true
  },
  "presets": [
    [
      "@babel/preset-env",
      {
        "bugfixes": true,
        "useBuiltIns": "usage",
        "corejs": "3.27.2"
      }
    ]
  ]
}

However, for backward compatibility we couldn't change the pre-existing behavior of @babel/preset-env's targets option, so esmodules there completely overwrites browsers. We need to document this.

I recommend using the top-level targets option, instead of @babel/preset-env's targets, because:

  • it has the better intersection behavior
  • can also be read by other plugins that can adjust their behavior based on your targets, while if you use it just in @babel/preset-env other plugins will always assume the oldest possible targets.
liuxingbaoyu

liuxingbaoyu commented on Jan 26, 2023

@liuxingbaoyu
Member

We need to document this.

We can also modify the message in code to link to the documentation.

epreston

epreston commented on Jan 26, 2023

@epreston
Author

I see, that makes sense. You are right, using the top-level targets option is the best way to go.

Should I leave this open to capture the "documentation" task ?

added a commit that references this issue on Jan 26, 2023
nicolo-ribaudo

nicolo-ribaudo commented on Jan 26, 2023

@nicolo-ribaudo
Member

Should I leave this open to capture the "documentation" task ?

Yes please! (or, if you want to open a PR to github.com/babel/website, that would be even better 👀)

epreston

epreston commented on Jan 27, 2023

@epreston
Author

Good idea, I will try my hand at updating the documentation. I'll reference the info you provided here and close issue once the PR is submitted.

linked a pull request that will close this issue on Jan 27, 2023
epreston

epreston commented on Jan 27, 2023

@epreston
Author

PR Submitted. Thank you for clarifying this for me.

epreston

epreston commented on Mar 3, 2023

@epreston
Author

Yes please! (or, if you want to open a PR to github.com/babel/website, that would be even better 👀)

I did that, waited a month. What's the process ?

nicolo-ribaudo

nicolo-ribaudo commented on Mar 4, 2023

@nicolo-ribaudo
Member

Sorry, the only problem was that I somehow forgot about your PR 😅

epreston

epreston commented on Mar 4, 2023

@epreston
Author

Maybe it's for the best. @JLHwung was able to help us refine it with the extra time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @epreston@nicolo-ribaudo@babel-bot@liuxingbaoyu

      Issue actions

        [Bug]: babel/preset-env - document says esmodules is intersected, build warning says its ignored. · Issue #15371 · babel/babel