Nuxt.js: Use babel-polyfill

[alidlorenzo]

As per this issue babel/babel#3825, babel-polyfill is most useful for applications, so that it can have as close as possible to a real ES6 environment, since a limitation of
babel-runtime is that it does not work with certain parts of ES6, such as certain instance methods.

Babel-preset-vue-app cannot modify the entry point, so it can not have babel-polyfill preconfigured https://github.com/vuejs/babel-preset-vue-app/issues/5.

Is there a safe way to extend the Nuxt's entry to include babel-polyfill?

Ideally, since Nuxt doesn't give access to the webpack template itself and only provides the option of extending it, it would be best to have the recommended defaults.

Perhaps it would be better to use babel-preset-vue plugin and have Nuxt setup the runtime/polyfills itself?

_{This question is available on Nuxt.js community (#c476)}

[awronski]

Why not add to nuxt.config.js?

[...]
  build: {
    vendor: [ 'babel-polyfill', 'eventsource-polyfill' ]
    }
[...]

[lmj0011]

I think @awronski meant this: https://nuxtjs.org/api/configuration-build/#babel

[egoist]

If you want to use babel-polyfill with babel-preset-vue-app, I guess you need to set useBuiltIns to true to prevent from being polyfilled twice https://github.com/vuejs/babel-preset-vue-app#usebuiltins

[xemoka]

I was having similar problems here for IE11, I wanted to use the vendor solution for loading the polyfill, however this doesn't work properly for generated sites—I ended up adding via the vue-meta facilities

{ 
head: {
    script: [
      { src: 'polyfill.min.js' }
    ]
}}

There should be a better way to do this, no?

[danielpost]

@xemoka Did you ever figure out a better way?

[xemoka]

@danielpost Unfortunately the client decided to scale back the end deliverables, I haven't had a chance to revisit this again.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.