switching between multiple embedded components seems buggy

[sk-t3ch]

Describe the bug
I have a few nuxt-custom-elements components embedded in my website (https://t3chflicks.org/Services) which are loaded from an external source (document-store.t3chflicks.org, medium-to-markdown.t3chflicks.org). When I switch page, loading a diferrent nuxt-custom-elements component, there seems to be odd behaviour:

• reloading the same component instead of new one
• failing to load with an error of

  Uncaught TypeError: Illegal constructor
   at new n (viewer-component.js:432)
  

To Reproduce
Steps to reproduce the behavior:

• load multiple components as described in https://github.com/GrabarzUndPartner/nuxt-custom-elements-example/blob/main/examples/external/pages/index.vue
• load a nuxt page containing a nuxt-custom-element
• switch between pages with nuxt-custom-elements
• notice the bugs

Sorry if this isnt enough informatio, please say if you would like an example project.

Cheers

[ThornWalli]

Hello @sk-t3ch,

The error message comes from the polyfill @ungap/custom-elements. It then comes to a mixing when changing pages and gives an error between the different bundles.

Solution would be to disable the polyfill in the bundles (https://nuxt-custom-elements.grabarzundpartner.dev/options/#polyfill). And if needed, build it directly into your page.

[rmarmitt]

Hey, maybe this occours because "destroyTimeout" property in vue-custom-element?

I caught this same scenario during testing. Browsing between pages with multiple components, they start to get destroyed.

[ThornWalli]

Close the issue for now, but can be reopened if used.

[sk-t3ch]

Can i see your working version, I stopped using it because of this problem

[sk-t3ch]

https://github.com/sk-t3ch/t3chflicks-emoji-search/blob/master/src/widget/app/nuxt.config.js#L43 This is an open source project which uses it

[ThornWalli]

Reopen this issue for now 🙂

[rmarmitt]

Can i see your working version, I stopped using it because of this problem

Hi sk-t3ch, I have added "polyfill: false" to customElements config, and also "destroyTimeout: null" in tags.

But i don't know if destroyTimeout is really required in this case. Needs more tests.

E.g nuxt.config.js

customElements : {
  polyfill: false,
  entries: [
    {
      name: 'exampleEntry',
      tags: [
        {
          name: 'exampleTag',
          options: {
            destroyTimeout: null
          }
        }
      }
    ]
  ]
}

Also, polyfill is highly recommended because of compatibility between browsers, and this should be an temporarily workaround.

[sk-t3ch]

thanks @rmarmitt, I will try that.

@ThornWalli you mention

build it directly into your page

Sorry, I am inexperienced. How would this be done? Could you share a link to something similar?

[ThornWalli]

I meant that the polyfill is used on the target side. But it is also not nice...

Yesterday I wanted to look at the problem again, unfortunately I don't get an example built so far.

Question is whether you get even when initializing the polyfill with whether this is already set, so you could then block the import.

nuxt-custom-elements/lib/tmpl/entry.js

Lines 4 to 6 in a456a0b

	<% if (options.polyfill && (options.modernPolyfill || !options.modern)) { %>
	import '@ungap/custom-elements'; // For cross-browser compatibility https://github.com/ungap/custom-elements.
	<% } %>

[rmarmitt]

I meant that the polyfill is used on the target side. But it is also not nice...

Yesterday I wanted to look at the problem again, unfortunately I don't get an example built so far.

Question is whether you get even when initializing the polyfill with whether this is already set, so you could then block the import.

Hey @ThornWalli, do you need an reproduction case? I can provide an repo with steps to reproduce the problem.

But basically, create two pages, A and B, add the builded js on the target A and navigate between those pages multiple times (at least 3 times). You will see the bug.