IE9/IE10: Only the first two instances of Vue custom elements are initialised

[kyleoliveiro]

In IE9 and IE10, when including more than 2 instances of a Vue custom element on the page, only the first two are initialised and rendered to the DOM.

In IE11 and other browsers, it works fine.

[karol-f]

Hi, I would love to help. Can you please prepare GitHub repo or CodeSandbox (https://codesandbox.io/s/vue)?

[kyleoliveiro]

Thanks for the quick reply. Let me prepare a GitHub repo for you.

[kyleoliveiro]

Alright, here's the repo: https://github.com/kyleoliveiro/vue-ce-test

[karol-f]

Hi, you have two 'babelPollyfill' loaded:

• https://github.com/kyleoliveiro/vue-ce-test/blob/d05a08b49657355a193ac9710afd9d3b6f3b7dd2/webpack.config.js#L7
• https://github.com/kyleoliveiro/vue-ce-test/blob/d05a08b49657355a193ac9710afd9d3b6f3b7dd2/src/index.html#L15

Just remove one (preferrably that from index.html) and it will work.

[kyleoliveiro]

Thanks for the reply. Unfortunately, that is not the case. My Webpack's entry is configured to output to separate scripts from two different "entry" points.

src/components/index.js => dist/js/components.js (this file does not contain babel polyfill) node_modules/@babel/polyfill => dist/js/babelPolyfill.js

So the babel polyfill script is actually only included once on the page. If I remove <script src="js/babelPolyfill.js"></script> from index.html, then any ES6 features will not work in IE9/10:

Object doesn't support property or method 'includes'

[karol-f]

Ok, I see. Is it connected to vue-custom-element? As you see on the screenshot above - in IE10 it's working fine without babel-polyfill. I'll try to look at it in spare time.

[kyleoliveiro]

Yes, it works without babelPolyfill.js. Could be an issue with @babel/polyfill or with document-register-element. Thanks for your help. In the meantime I guess I'll have to do without the ES6 features that babel-polyfill provides for IE9/10.

[kyleoliveiro]

Okay, I've pushed an update to my repo.

I've separated cePolyfill.js (which is the document-register-element) from components.js.

I've also added vce-greeting (Vue CE) and x-greeting (Native CE).

x-greeting seems to be giving no problems while vce-greeting will throw an error in IE9/10 when babelPolyfill.js is included on the page.

Therefore I think the issue lies with vue-custom-element.

[karol-f]

Thanks for the investigation. Will look at it.

[karol-f]

Hi @kyleoliveiro , it was due to messed up dependencies and using babel@7 beta. It's fixed in https://github.com/karol-f/vue-ce-test/commit/575d5287c9eed2828f148d7c49ff6f92d8580ab5

Regards!