svelte aframe TypeError: Cannot read properties of undefined (reading 'constructor')

[Sincenir]

When i use aframe combined with svelte, is seems that my svelte's render is faster that aframe's import, causing my browser to report an error.

error:TypeError: Cannot read properties of undefined (reading 'constructor')

code:

<script>
    import 'aframe';

    let box = '#4CC3D9';
    let sphere = '#EF2D5E';
    let cylinder = '#FFC65D';
</script>

<div class="controls">
    <label>
        <input type="color" bind:value={box}>   
        box
    </label>

    <label>
        <input type="color" bind:value={sphere}>    
        sphere
    </label>

    <label>
        <input type="color" bind:value={cylinder}>  
        cylinder
    </label>
</div>

<a-scene background="color: #FAFAFA">
    <a-box position="-1 0.5 -3" rotation="0 45 0" color={box} shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color={sphere} shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color={cylinder} shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
</a-scene>

<style>
    .controls {
        position: absolute;
        top: 1em;
        left: 1em;
        z-index: 2;
    }

    input {
        height: 2em;
    }
</style>

• A-Frame Version: ^1.5.0
• Platform / Device: chrome
• Reproducible Code Snippet or URL: ..

[akhil888binoy]

I would like to work on this issue

[vincentfretin]

I don't know anything about svelte, but these type of error is related to async loading aframe I'm sure. Async loading aframe is worked on in #5419.

[dmarcos]

@akhil888binoy this looks an svelte integration issue. if you are knowledgable on Svelte you might be able to educate on how to integrate svelte and A-Frame properly. Having a good canonical example we can point to would be really helpful