Description
💻
- 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 commentedon Jan 26, 2023
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 commentedon Jan 26, 2023
Thank you babel-bot. We need to update the documentation or tool.
nicolo-ribaudo commentedon Jan 26, 2023
It should definitely be intersected, I'll check what the code does.
nicolo-ribaudo commentedon Jan 26, 2023
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 withbrowsers
:However, for backward compatibility we couldn't change the pre-existing behavior of
@babel/preset-env
'stargets
option, soesmodules
there completely overwritesbrowsers
. We need to document this.I recommend using the top-level
targets
option, instead of@babel/preset-env
'stargets
, because:@babel/preset-env
other plugins will always assume the oldest possible targets.liuxingbaoyu commentedon Jan 26, 2023
We can also modify the message in code to link to the documentation.
epreston commentedon Jan 26, 2023
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 ?
Update .babelrc.json
nicolo-ribaudo commentedon Jan 26, 2023
Yes please! (or, if you want to open a PR to github.com/babel/website, that would be even better 👀)
epreston commentedon Jan 27, 2023
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 commentedon Jan 27, 2023
PR Submitted. Thank you for clarifying this for me.
epreston commentedon Mar 3, 2023
I did that, waited a month. What's the process ?
nicolo-ribaudo commentedon Mar 4, 2023
Sorry, the only problem was that I somehow forgot about your PR 😅
epreston commentedon Mar 4, 2023
Maybe it's for the best. @JLHwung was able to help us refine it with the extra time.