babel-polyfills icon indicating copy to clipboard operation
babel-polyfills copied to clipboard

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

Open qiulang opened this issue 1 year ago • 0 comments

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.

qiulang avatar Feb 02 '24 07:02 qiulang