search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.74k stars 4k forks source link

A-Frame compatibility issue with Astro? #5254

Closed weizenyang closed 1 year ago

weizenyang commented 1 year ago

Description: Error saying that I attached outside of when using Astro, which I did not do. and equivalent primitive object does not show this error.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>

  </head>
  <body>

    <a-scene>
        <a-entity geometry="primitive: box; width: 3" position="0 0 0" rotation="0 45 0" color="#4CC3D9"></a-entity>
        <a-sky color="#ECECEC"></a-sky>
      </a-scene>

  </body>
</html>

Log output:

core:a-node:warn You are attempting to attach outside of an A-Frame scene. Append this element to <a-scene> instead.

a-scene.js:193 Uncaught TypeError: a[e] is not a constructor at HTMLElement.initSystem (a-scene.js:193:26) at HTMLElement.initSystems (a-scene.js:180:10) at HTMLElement.doConnectedCallback (a-scene.js:142:10) at HTMLElement.connectedCallback (a-scene.js:81:10) at 6450 (a-scene.js:792:23) at n (bootstrap:19:32) at 5579 (index.js:66:14) at n (bootstrap:19:32) at startup:4:27 at aframe.min.js:1:1325167 initSystem @ a-scene.js:193 initSystems @ a-scene.js:180 doConnectedCallback @ a-scene.js:142 connectedCallback @ a-scene.js:81 6450 @ a-scene.js:792 n @ bootstrap:19 5579 @ index.js:66 n @ bootstrap:19 (anonymous) @ startup:4 (anonymous) @ aframe.min.js:1 (anonymous) @ universalModuleDefinition:9 (anonymous) @ universalModuleDefinition:1

index.js:95 A-Frame Version: 1.4.1 (Date 2023-01-04, Commit #5183a179)

index.js:96 THREE Version (https://github.com/supermedium/three.js): ^0.147.1

index.js:98 WebVR Polyfill Version: ^0.10.12

dmarcos commented 1 year ago

What’s Astro? Sorry not familiar

dmarcos commented 1 year ago

Assuming Astro is https://astro.build/

This is probably an integration issue. not familiar with your stack. Might want to open a question on https://stackoverflow.com/questions/tagged/aframe for more visibility. Best of luck

subhankar-trisetra commented 1 year ago

@weizenyang I faced the same issue, resolved it by putting is:inline at the two script tags, one for loading aframe inside the head and another for my custom camera control at the end of body. For you though, I think this should work:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/1.4.1/aframe.min.js" is:inline></script>
  </head>
  <body>
    <a-scene>
            <a-entity geometry="primitive: box; width: 3" position="0 0 0" rotation="0 45 0" color="#4CC3D9"></a-entity>
            <a-sky color="#ECECEC"></a-sky>
        </a-scene>
  </body>
</html>
weizenyang commented 1 year ago

@subhankar-trisetra Legend!