Query parameters on entry point JS files causes error Uncaught (in promise) TypeError: Cannot read property 'data-opts' of undefined

[perrygovier]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:

On Ionicframework.com, we include an md5 checksum query parameter to bust the cache of script includes. Doing this on the new module/nomodule script that I am warned to start using causes the following error:

Uncaught (in promise) TypeError: Cannot read property 'data-opts' of undefined
    at U (p-36d52602.js:1)
    at ionic-site-components.esm.js?v=4f2d1375934be104d1d77f8e2cc4648b:1

Expected behavior:

Stencil should bootstrap and hydrate like it does with the legacy script tag

Steps to reproduce:

Related code:

Add query parameters to the script tags stencil instructs you to use. Something like

<script type="module" src="/js/stencil/ionic-site-components/ionic-site-components.esm.js?v=4f2d1375934be104d1d77f8e2cc4648b"></script>
<script nomodule="" src="/js/stencil/ionic-site-components/ionic-site-components.js?v=084d3915fedb423feae090748bfa6ffe"></script>

Other information:

You can reproduce this in the ionic-site repo by swapping out the comments on these lines and restarting the watch script.

[manucorporat]

The lack of import.meta in Edge requires scripts to find themselves in the DOM to figure out their absolute location, the query must be breaking that

[noisyscanner]

I get this when trying to use Stencil inside Shadow DOM. @perrygovier did you solve this in the end??

[perrygovier]

@noisyscanner manu's fix resolved this for me. Are you on the current version of stencil? Is it possible to not use query parameters in your URL?

[noisyscanner]

Actually had the same issue without query params in the URL, but just from trying to render it inside shadow root.

[biirus]

Yeah, I have the same issue. My url has no query params:

<script type="module" src="https://example.com/minds/dist/minds/minds.esm.versioned.js"></script>
<script nomodule src="https://example.com/minds/dist/minds/minds.versioned.js"></script>

versioned comes from my kinda cache invalidation system.

p-8107f8fd.js:2 Uncaught (in promise) TypeError: Cannot read property 'data-opts' of undefined
    at L (p-8107f8fd.js:2)
    at minds.esm.versioned.js:2

If I place data-stencil-namespace="minds" to the script tags, error disappears.

[SchemeSonic]

Hey everyone, today I got the same problem while I was refactoring my code. ( Your problem could be PascalCase || CamelCase)

Wrong one:

<script type="module" src="/build/PwcMap.esm.js"></script>
<script nomodule src="/build/PwcMap.js"></script> 

Correct one:

<script type="module" src="/build/pwcmap.esm.js"></script>
<script nomodule src="/build/pwcmap.js"></script> 

Be careful using Replace All 💀

Cheers

[ElectricDanDan]

@noisyscanner I'm getting this same issue. Specifically from trying to use an external component in a shadow DOM component. Did you happen to find a solution/way around this?

[erichstark]

@manucorporat I have got the same error when adding version of the build into url.

/my-components/my-components.202007.esm.js

Is that a problem for stencil?

[noisyscanner]

@ElectricDanDan unfortunately not - I have not used Stencil for a while I am afraid :/