Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task
epreston opened this issue Jan 26, 2023 · 12 comments · May be fixed by babel/website#2714
Open
1 task

Comments

@epreston
Copy link

epreston commented Jan 26, 2023

💻

  • 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.

@babel-bot
Copy link
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
Copy link
Author

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

@nicolo-ribaudo
Copy link
Member

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

@nicolo-ribaudo
Copy link
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
Copy link
Member

We need to document this.

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

@epreston
Copy link
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 ?

epreston added a commit to epreston/template-web-webpack that referenced this issue Jan 26, 2023
@nicolo-ribaudo
Copy link
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
Copy link
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.

@epreston epreston linked a pull request Jan 27, 2023 that will close this issue
@epreston
Copy link
Author

PR Submitted. Thank you for clarifying this for me.

@epreston
Copy link
Author

epreston commented Mar 3, 2023

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 ?

@epreston epreston reopened this Mar 3, 2023
@nicolo-ribaudo
Copy link
Member

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

@epreston
Copy link
Author

epreston commented Mar 4, 2023

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
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants