babel / babel/babel-polyfills

useBuiltIns: 'usage' will only transpile but not polyfill my nuxt v2 app

Open
#203 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.