How to add a polyfill to nuxt 2.0?

Question

In Nuxt 1.4.2, I had the following in my nuxt.config.js:

build: {
  vendor: ['babel-polyfill'],
  babel: {
    presets: [
      ['vue-app', {
        useBuiltIns: true,
        targets: { ie: 11, uglify: true },
      },
      ],
    ],
  },
},

It seems that all of this is broken in Nuxt 2.0. At a minimum I'm looking to polyfill enough to get IE 11 working. Here's what I've tried:

Using vendor as I used to

Removing build.babel allowed the build process to work:

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

But I think build.vendor is just ignored now, so this seems to do nothing.

Using polyfill.io

I tried adding:

script: [
  { src: 'https://cdn.polyfill.io/v2/polyfill.min.js' },
],

to my head, along with:

render: {
  resourceHints: false,
},

to disable the preload hints (I'm unsure if this matters). This results in a page which looks correct - polyfill.min.js is loaded before all other scripts. Somehow, when I test on ie11, Object.entries is undefined and the page explodes.

Answer 1

Here are the steps I took to upgrade to nuxt 2.2.0, and get my app working on IE 11 with the necessary polyfills. Your experience may differ, depending on which packages you have installed.

Step 1

Remove build.vendor and build.babel from nuxt.config.js.

build.vendor is deprecated. I tried to tweak build.babel, as the nuxt docs indicate it defaults to using vue-app. I think it's actually using babel-preset-env. This, along with other tools, depends on browserslist, which has some rational defaults. I didn't change my browserslist config, but you could by following their docs.

Step 2

Upgrade or replace any modules causing build issues. When I upgraded, @nuxtjs/apollo had a transpilation problem via one of its dependencies. This has since been resolved, however I ended up switching to vue-apollo + apollo-boost as it was a better fit for my project.

Step 3

Add polyfills for any extra features core-js doesn't provide, but that your target browsers need. You should be able to determine these based on any exceptions thrown in the console while testing on your targets.

I used polyfill.io by adding the following to nuxt.config.js:

const features = [
  'fetch',
  'Object.entries',
  'IntersectionObserver',
].join('%2C');

head: {
  script: [
    { src: `https://polyfill.io/v3/polyfill.min.js?features=${features}`, body: true },
  ],
},

Note: I've included body: true which moves the script out of the head section of your page. It will, however, be inserted before any of your application code.

Note: IntersectionObserver is recommended for link prefetching.

You can create a similar URL by using the builder. Note that once you select a feature, the builder will automatically select default, which is (as far as I can tell) functionally equivalent to the polyfills that ship with core-js. Because core-js isn't currently optional (you're going to ship it anyway), it makes sense not to include the default set from polyfill.io.

For an in-depth discussion of polyfills and why polyfill.io is probably a good idea, see this post. The short version is that it loads only the stuff the client actually needs based on the browser's UA.

Finally, you'll need to test your app to see which additional features (if any) are needed for successful execution in a given browser. You may need to repeat this process several times until all of the errors go away. Make sure to test on multiple pages, as not all of your page bundles will have the same requirements.

Conclusion

While some aspects of the above are application-specific, hopefully this can help move you in the right direction. The most important takeaway is that there's no one solution to this - you'll still need to test in your target browsers to verify that the code executes.