Stencil: Multiple component script inclusion fails on IE/Firefox

[rahulbhooteshwar]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x ] bug report
[ ] feature request
[ ] support request

Current behavior:

I am trying to use stencil component using component script generated after build. It works fine on all browser. But whenever component script for the same component is included more than once on a page, component doesn't appear on IE/Firefox but works fine on Chrome.

Why to include script more than once?

In our case these components (script + selector) are rendered using dynamic content and may come more than once in dynamic content.

Expected behavior:

Components should be rendered fine on all browser irrespective of no. of times script is included on page.

Steps to reproduce:

• create one stencil component
• build the component
• include the generated script twice on an html page
• Add selector of the component
• open the page in IE

Other information:

This is not just about including script more than once on page. If some component is used by 2 different components using npm dependency & those 2 components are used on same page this will cause issue on IE.

It is observed that when it fails on IE in this scenario, "hydrated" class is missing on component which seems to control component life cycle.

[rahulbhooteshwar]

I have created a demo project to reproduce the issue.

[MuhammadShaban]

the problem still exists ~0.16.0
any news?

[ps011]

@MuhammadShaban, Yes, the problem still exists in 0.16.0. Is there any bug fix in recent versions related to this ?

[LalitKushwah]

This is very crucial issue, I am not getting why stencil guys are not even responding in this thread
@adamdbradley @manucorporat @jgw96

[chrisbraddock]

@rahulbhooteshwar, I looked at your repo and am able to reproduce your result in IE.

I attempted to just hack in a bypass to loading duplicate scripts, but no luck. There is no difference with that bit of code.

1030 sounds related, so I tried with this fork as well, both with and without my patch, but still no juice.

As you noted, simply throwing a "hydrated" class on the component in IE fixes the rendering.

Maybe try stepping through @stencil/core code around where that class gets applied and see where the deviation in IE is, when the script tag is included twice. I have to jump on to something else unfortunately.

[richrd]

I also saw this issue and wondered whether #1030 is related. To find out check the network tab in developer tools and see if any of the stencil assets fail to load (check for 404 errors).

If all the assets load properly then these two issues aren't related.

[simonhaenisch]

Edit: Sorry, I didn't have a proper look at the original issue... this is relating to rahulbhooteshwar/stencil_ie_issue, where the child is imported by the parent and also as a script. When adding the script tag for the same component twice, the component indeed doesn't render at all.

---

@LalitKushwah I finally had some time to look into this.

The issue is not that the component doesn't load but that the parent is not getting hydrated, even though the child is rendered and hydrated.

Therefore visibility is still set to hidden (waiting for the hydrated class to be added which overwrites this).

Not entirely sure how that happens only if the component script is included twice. Don't have any more time to work on a fix at the moment, but hopefully someone can take a look who knows the matter a bit better.

[rahulbhooteshwar]

@simonhaenisch @richrd This is not just the case with multiple scripts. We have observed the same when we have interdependent components from a mono-repo .e.g. suppose we have a lerna based mono-repo having 2 components xyz-image & xyz-banner where xyz-banner installs xyz-image as dependency and import the same in tsx file. When the dist files generated from both the components are inlcuded on same html page, this particular issue can be reproduced.

Reason: xyz-image code is coming twice on the page (individual as well as from within xyz-banner) & having some global conflict on IE.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Stencil, please create a new issue and ensure the template is fully filled out.

Thank you for using Stencil!