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

[Sincenir]

trafficstars

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