Failed to import uce components as described in "Lazy Loaded Components" section

[ankar71]

I use the following code in my html file:

<script type="module">
        import {parse} from '//unpkg.com/uce-template?module';
        import loader from '//unpkg.com/uce-loader?module';
        loader({
            on(component) {
                // ignore uce-template itself
                if (component !== 'uce-template')
                fetch(`components/${component}.uce`)
                    .then(body => body.text())
                    .then(definition => {
                    document.body.appendChild(
                        parse(definition)
                    );
                });
            }
        });
</script>

appendChild fails with the error:

Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "uce-template" has already been used with this registry
    at define (https://unpkg.com/uce@1.15.0/esm/index.js?module:149:23)
    at defineComponent (https://unpkg.com/uce-template@0.6.0/esm/index.js?module:210:5)
    at HTMLTemplateElement.init (https://unpkg.com/uce-template@0.6.0/esm/index.js?module:288:3)
    at bootstrap (https://unpkg.com/uce@1.15.0/esm/index.js?module:61:24)
    at HTMLTemplateElement.value (https://unpkg.com/uce@1.15.0/esm/index.js?module:134:7)
    at http://127.0.0.1:5500/page.html:20:35

[WebReflection]

You can test live the loader, which is here.

If I cannot reproduce your issue, the issue itself is not helping much.

Could you provide a minimal example that fails? I have no idea what you have on your HTML, so I can't help.

[ankar71]

Thanks for your response. I found where the problem is after looking at your code. In the uce file, I had my component inside a <template is="uce-template> tag (similarly to vue). You could blame me, but I saw nowhere that I have to remove the template tag when I move the element in a separate file (I could not know how parse works). BTW, did you check this?

[WebReflection]

I saw nowhere that I have to remove the template tag when I move the element in a separate file

Yeah, the documentation is very sketchy at this point, and there is already an issue to improve that, but it takes time.

However, it was mentioned in the medium post.

The reason external components don't require the <template> around is that you can actually open these in a browser and check their appearance right away without needing even the library, but it's also aligned with how Vue or Svelte components are defined.

BTW, did you check this?

nope, super interesting, and I think I should create a community related projects section somewhere 👍

[WebReflection]

P.S. the issue for the documentation https://github.com/WebReflection/uce-template/issues/8