Vue-cli: Dynamic imports of routes (code splitting) requires vue.config.js tweak for IE11 support

[drewtownchi]

Version

3.0.0-beta.16 - 3.0.0.-rc.3

Reproduction link

https://github.com/drewtownchi/VueRouterTranspile

Steps to reproduce

1. Create a new vue cli project
2. Change the about route import in router.js to const About = () => import ("./views/About.vue");
3. npm run serve
4. browse to home in IE.
5. Click on the about link and see the error in console [vue-router] Failed to resolve async component default: TypeError: [object Object] is not iterable
6. Create a vue.config.js
7. module.exports = {
   transpileDependencies: [
   "vue-router"
   ]
   }
8. npm run serve again
9. Visit the home page and go to the about page again. It works this time.

What is expected?

The page should display with out an error in the console and load the page

What is actually happening?

The page is not loading due to the dynamic import.

---

Documentation should be provided that dynamic imports or vue router code splitting needs to transpile the vue-router dependency or that an additional polyfill is necessary. I'm not sure what the appropriate workaround is (if it is possible to get this to work without the transpile in vue.config.js)

[andredewaard]

Same issue here. Already tried with babel-polyfill.

[cristianl]

I hit the same error recently while using a dynamic import to load a polyfill.

The polyfill IE11 needs is es6.array.iterator. By default, vue-cli includes es6.promise.

If you'd rather avoid transpileDependencies you can specify both in babel.config.js:

module.exports = {
  presets: [['@vue/app', {
    polyfills: [
      'es6.array.iterator',
      'es6.promise'
    ]
  }]]
}

[LinusBorg]

Hm, weird. This was supposedly fixed in babel-preset-env back in February:

https://github.com/babel/babel/pull/7400

[cristianl]

@LinusBorg That PR fixed detection of Promise usage in app code or dependencies listed in transpileDependencies. Prior to it, Babel was only providing core-js es6.promise (as vue/babel-preset-app currently does) so even adding vue-router to transpileDependencies would cause this error in IE11.

You can confirm this by following the same steps as @drewtownchi's instructions but instead of steps 6 and 7, adding this to main.js:

function fakePromise() {
  return Promise.all()
}

Relying on transpileDependencies is risky because even if you don't use some external dependency, you will get the same error using import() or require.ensure() to load an external script.

---

I took a look at the webpack docs and tried the Promise polyfills listed there and both work on their own, so it's specific to the modular core-js polyfills used by babel-preset-env (core-js es6.promise only provides Promise and it doesn't include Promise.all() by design)

Incidentally, when I tried to specify polyfills: ['es6.string.iterator', 'web.dom.iterable', 'es6.promise'] like the fix in babel/babel#7400, I got "Cannot read property 'android' of undefined" or "Cannot read property 'chrome' of undefined" in the CLI even though my browserslist covers it, and even when I force targets in babel.config.js:

module.exports = {
  presets: [['@vue/app', {
    polyfills: ['es6.string.iterator', 'web.dom.iterable', 'es6.promise'],
    targets: { chrome: '62' }
  }]]
}

[LinusBorg]

Thanks for digging into this.

The error about Cannot read property 'android' of undefined seems to be related to the web.dom.iterable polyfill (removing it from your babel config makes the build run fine. Is that one also required to make Promises work in IE?

If not, I would like to skip this error in the context of this issue, and make sure that we add es6.array.iterator (you used es6.string.iterator, but I assume that was a typo?) to the default polyfills that get included.

[cristianl]

Yep, es6.array.iterator is the one IE11 needs.

The string iterator one wasn't a typo, but I initially tried to fix the error by applying the same polyfills from that Babel PR in my babel.config.js (['es6.object.to-string', 'es6.string.iterator', 'web.dom.iterable', 'es6.promise']) but then I always got the error Cannot read property 'android' of undefined.

What confused me is that if you force Babel to apply the same polyfills by having Polyfill.all() in your code, you don't get a build error.

I presume es6.array.iterator is a subset of web.dom.iterable, and there may be some usecase (outside of webpack's dynamic modules) where web.dom.iterable may be needed, but I don't know for sure. es6.array.iterator is sufficient to fix this issue with IE11.