useBuiltIns: 'usage' will only transpile but not polyfill my nuxt v2 app
- Dominant language
- TypeScript
- Stars
- 357
- Forks
- 62
- PR merge metrics
- No merged PRs in 30d
Description
I know this is more of nuxt(v2) problem and I have opened an issue to them but I am looking for the possible reason I can find.
This is my `babel.conig.js`. It works for all my other webpack projects except for nuxt (app). For nuxt app, from the output message I think it will only **transpile** but not **polyfill** and IE 11 does fail to show the page
```
presets: [
[
// '@babel/preset-env',
'@nuxt/babel-preset-app',
{
debug: true,
targets: {
chrome: '100',
ie: '10',
firefox: '100'
},
useBuiltIns: 'usage',
shippedProposals: true,
modules: "commonjs",
corejs: '3.25'
}
]
]
```
For my other webpack project, the only different is I use '@babel/preset-env' instead of '@nuxt/babel-preset-app' (but I tried both of them). From the webpack output I can see it will transpile and polyfill my app,
```
// The transpile part
Using targets:
{
"chrome": "100",
"firefox": "100",
"ie": "10",
}
Using modules transform: commonjs
Using plugins:
proposal-numeric-separator { ie }
proposal-logical-assignment-operators { ie }
...
// The polyfill part
The corejs3 polyfill added the following polyfills:
es.array.concat { "ie":"10" }
es.object.to-string { "ie":"10" }
es.regexp.to-string { "ie":"10" }
...
```
But for my nuxt app, I only see the transpile part but no polyfill part and IE 11 can't open the page
```
@babel/preset-env: DEBUG option
Using targets:
{
"chrome": "100",
"firefox": "100",
"ie": "10"
}
Using modules transform: commonjs
Using plugins:
transform-unicode-sets-regex { chrome < 112, firefox < 116, ie }
bugfix/transform-v8-static-class-fields-redefine-readonly { ie }
proposal-class-static-block { ie }
syntax-private-property-in-object
syntax-class-properties
proposal-numeric-separator { ie }
...
corejs3: DEBUG option
Using targets: {
"chrome": "100",
"firefox": "100",
"ie": "10"
}
Using polyfills with usage-global method:
regenerator: DEBUG option
Using targets: {}
```
From the output I **only** see plugins to transpile and the fact IE 11 fails to open the page make me I draw the conclusion no polyfill for my nuxt app. But I am not 100% sure this is the case. I asked the question at https://github.com/babel/babel/discussions/16253 but since I am desperate to find the reason I am also opening an issue here.
Contributor guide
Research direction
Start with the reported babel.config.js and compare @nuxt/babel-preset-app with @babel/preset-env, focusing on the corejs 3.25 and usage-global debug output. Reproduce the Nuxt v2 build against IE 11 and use the linked Babel discussion as context; done means establishing whether polyfills are omitted and documenting a confirmed cause or configuration change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nuxtjs
- Domain
- build-system, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100