Dynamic import fails with stencil js

Question

I have some web components created using stenciljs. When I include them in the html from the beginng everything work fine, see example

<codext-gradient-button color="darkblue" class="hydrated">Gradient 
Button - Darkblue</codext-gradient-button>
<script type="text/javascript" src="https://unpkg.com/@codext/stencil- 
[email protected]/dist/gradient-button.js"></script>

https://jsfiddle.net/vqe7wchb/1/.

But when I add dynamically the component the operation fails, see example

<script>
  let script = document.createElement('script');
    script.src = "https://unpkg.com/@codext/stencil-  [email protected]/dist/gradient-button.js";
document.head.appendChild(script);
</script>
<codext-gradient-button color="darkblue" class="hydrated">Gradient Button 
- Darkblue</codext-gradient-button>

https://jsfiddle.net/vqe7wchb/2/.

I did open a bug in the stenciljs project on github, you may find there more details https://github.com/ionic-team/stencil/issues/1429.

have you tried using es modules? it's a build in the browser way of loading dependencies. e.g. instead of creating script tags manually you can just use ``` import './foo.js'; ``` — daKmoR
Your code appends the script in the head when the head had been traversed already, therefore, although the script gets appended to head, it never gets loaded. — Bilal Alam
nah, that's not the problem because the script gets loaded and the code gets executed. — malek yahyaoui

Casey Woolley Casey Woolley · Accepted Answer · 2019-10-30T18:18:11

This is an issue for the es5 bundle loader for older web browsers. In case anyone is having trouble with this make sure you dynamically append the script as the last item on the page, otherwise it will fail to lazy load additional scripts.

I posted the issue on the stencil github: https://github.com/ionic-team/stencil/issues/1981

Dynamic import fails with stencil js

1 Answers