TypeError: scriptElm is undefined

[vandres]

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:

I am using Stencil just for components. I include my scripts in a server side technology (Twig) to bind the asset cache to the template cache there:

<script type="module" src="/static/js/voan/voan.esm.{{ versionString }}js"></script>
<script nomodule src="/static/js/voan/voan.{{ versionString }}js"></script>

Then there is an .htaccess, which rewrites these files to the normal filename.

Having this setup, I always get the error message TypeError: scriptElm is undefined, which comes from this code:

const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
        ? Array.from(doc.querySelectorAll('script')).find(s => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute('data-stencil-namespace') === NAMESPACE)
        : null;
    const importMeta = "";
    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {

Is there anyway to include these JS files the way I do? In Version 1.9.2 this technique was working.

[KevinCarnaille2]

I don't know if you fixed your problem (hope so) but for other people facing this kind of issue :
The reason : the RegExp \/${NAMESPACE}(\\.esm)?\\.js($|\\?|#) doesn't match your script src, as you have added a versionString in the middle of the whole src attribute.

If you look closely into the snippet vandres gave us, you have a fallback (not officially documented ?) :

... || s.getAttribute('data-stencil-namespace') === NAMESPACE

For me, adding the data-stencil-namespace="your-namespace" attribute to my script tag fixed the problem.

[rwaskiewicz]

Hey folks 👋

I apologize that it took so long for someone on the team to respond to this issue.

There are two ways scriptElm could be undefined||null. I believe we patched the case where scriptElm could be null in #4101. However, I do believe that @KevinCarnaille2 is correct here & has an open issue to get 'data-stencil-namespace' documented.

Given this took so long for the team to respond to, if this is still an issue, and anyone is willing/able to create a minimal reproduction case for the team to take a look at, we'd greatly appreciate it. In the mean time, I've tagged ionic-team/stencil-site#777 to get it ingested into our backlog.

Thanks!

[ionitron-bot]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Stencil starter component library and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

[ionitron-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!