Skip to content

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

Open
@qiulang

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 babel/babel#16253 but since I am desperate to find the reason I am also opening an issue here.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions