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.

[rmarmitt]

Hi there.

Well, after some more tests I can confirm: it's happening even with polyfill disabled, but only in external sources.

oh lord. Today isn't a good day.

I was adding tag in wrong context. I'm sorry

[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.

[ThornWalli]

@sk-t3ch @rmarmitt There is an update on the beta branch (nuxt-custom-elements@1.9.1-beta.2).

Can you test this? 🙂

There are two changes:

1. Chunks were written to existing webpackJsonp from existing webpack instances.
   This is now a separate object for each entry.
   I found this because I have two different entries on page a and b. And one of them would not initialize.

nuxt-custom-elements/lib/utils/webpack.js

Line 127 in 91fc1b5

jsonpFunction: getJsonPFunctionName(entryName)

nuxt-custom-elements/lib/utils/webpack.js

Lines 140 to 143 in 91fc1b5

	function getJsonPFunctionName (entryName) {
	// eslint-disable-next-line no-secrets/no-secrets
	return 'webpackJsonpNuxtCustomElements' + pascalCase(entryName);
	}

2. Added a switch for the polyfill.

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

Lines 4 to 9 in 91fc1b5

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

[rmarmitt]

@ThornWalli I cannot find any pacakge with version "1.9.1-beta.2".

If I install nuxt-custom-elements@beta, its getting1.9.0-beta.2

Can you confirm if the build was generated and published?

Also I have tried install targeting the branch https://github.com/GrabarzUndPartner/nuxt-custom-elements.git#v1.9.1-beta.2,
but I get some errors from husky

[ThornWalli]

Mmhhhh https://www.npmjs.com/package/nuxt-custom-elements/v/1.9.1-beta.2

The package must be installed via npm, is conditional on Husky...

pinst deactivates the postinstall.

[rmarmitt]

edit: even with npm cache clean I got this error.

[ThornWalli]

@rmarmitt

I can install it.

This is rather strange now, even with unpkg I get it displayed.
https://unpkg.com/browse/nuxt-custom-elements@1.9.1-beta.2/

What do you get with $ npm show nuxt-custom-elements versions?

[rmarmitt]

well this really is quite strange

Looks like a cache problem?! Idk

[ThornWalli]

That's what I'm thinking too, tried the npm cache clean --force?

[rmarmitt]

Lol. Even with --force, no success.

With yarn works. Let's change and make some tests.

asap I will return with an feedback.

Thank you very much :)

[rmarmitt]

@ThornWalli looks like the polyfill problem its solved 🚀

Just remember to keep "destroyTimeout: null" in tags, otherside the components will be destroyed after timeout.

Idk why, but if you don't remove this property you will have problems with rendering.

This is what the vue-custom-element documentation says:

/* 
in case of using vue-custom-element with modals, we destroy  
it after defined timeout. Use "null" value if you want to manually "$destroy" it.
*/
destroyTimeout: 3000

[ThornWalli]

@rmarmitt could you maybe build a small example that needs the destroyTimeout modification?

Haven't had this problem yet and in my example with two different entries on two pages I have no problems.

[ThornWalli]

Fix is now in the main branch. https://www.npmjs.com/package/nuxt-custom-elements/v/1.9.1

[rmarmitt]

@rmarmitt could you maybe build a small example that needs the destroyTimeout modification?

Haven't had this problem yet and in my example with two different entries on two pages I have no problems.

Sure, I'll do it this weekend and let you know.