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

Question

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

kyleoliveiro opened this issue 7 years ago · 10 comments

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.

Answer 1 · 2018-06-20T07:13:51.000Z

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

Answer 2 · 2018-06-20T07:30:12.000Z

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

Answer 3 · 2018-06-20T08:05:26.000Z

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

Answer 4 · 2018-06-20T09:16:32.000Z

Hi, you have two 'babelPollyfill' loaded:

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

Answer 5 · 2018-06-20T09:32:12.000Z

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'

Answer 6 · 2018-06-20T10:05:56.000Z

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.

Answer 7 · 2018-06-20T10:46:29.000Z

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.

Answer 8 · 2018-06-20T11:26:33.000Z

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.

Answer 9 · 2018-06-20T11:47:20.000Z

Thanks for the investigation. Will look at it.

Answer 10 · 2018-07-05T20:49:44.000Z

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

Regards!