Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
qiulang opened this issue Feb 2, 2024 · 0 comments
Open

Comments

@qiulang
Copy link

qiulang commented Feb 2, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant