Error when using networked-aframe to run aframe application made with react and vite

84 Views Asked by At

I am trying to develop an aframe VR application that supports multiple users. To facilitate development with aframe I am using react+vite. After I finish developing the environment I run the npm run build command and the resulting project in the ´dist´ folder I run with the networked-aframe server.

These are the errors that I get on line 22 of the WsEasyRtcAdapter.js file after it tries to connect: Networked-Aframe Connecting...

WsEasyRtcAdapter.js:22 
Uncaught TypeError: Cannot read properties of undefined (reading 'setSocketUrl')
    at WsEasyRtcInterface.setServerUrl (WsEasyRtcAdapter.js:22:18)
    at NetworkConnection.connect (NetworkConnection.js:35:18)
    at NewComponent.connect (networked-scene.js:38:27)
    at AScene.emit (a-node.js:287:10)
    at NewComponent.init (networked-scene.js:21:10)
    at NewComponent.initComponent (component.js:323:10)
    at NewComponent.updateProperties (component.js:305:12)
    at AScene.updateComponent (a-entity.js:466:17)
    at AScene.updateComponent (a-scene.js:681:39)
    at AScene.updateComponents (a-entity.js:442:12)

WsEasyRtcAdapter.js:122 
Uncaught TypeError: Cannot read properties of undefined (reading 'sendDataWS')
    at WsEasyRtcInterface.broadcastData (WsEasyRtcAdapter.js:122:18)
    at NetworkConnection.broadcastData (NetworkConnection.js:153:18)
    at NewSystem.<anonymous> (networked.js:104:24)
    at AScene.tick (a-scene.js:702:36)
    at AScene.render (a-scene.js:742:32)
    at bound (bind.js:12:17)
    at onAnimationFrame (three.module.js:28350:35)
    at onAnimationFrame (three.module.js:12556:3)

a-entity.js:231 
Uncaught TypeError: parentEl.emit is not a function
    at AEntity.removeFromParent (a-entity.js:231:14)
    at AEntity.disconnectedCallback (a-entity.js:119:10)
    at removeChild (react-dom.development.js:11099:18)
    at commitDeletionEffectsOnFiber (react-dom.development.js:24028:15)
    at commitDeletionEffects (react-dom.development.js:23976:5)
    at recursivelyTraverseMutationEffects (react-dom.development.js:24259:9)
    at commitMutationEffectsOnFiber (react-dom.development.js:24346:9)
    at recursivelyTraverseMutationEffects (react-dom.development.js:24273:7)
    at commitMutationEffectsOnFiber (react-dom.development.js:24293:9)
    at recursivelyTraverseMutationEffects (react-dom.development.js:24273:7)

This is my aframe code with react.

import React from 'react';
import './styles/VirtualReality.css';

import sky from '../assets/scenes/sky.jpg';
import floor from '../assets/textures/floor.jpg';
import Chart from '../components/Chart';

export default function Environment() {
  return (
    <React.Fragment>
      <a-scene
        vr-mode-ui="enabled: true; cardboardModeEnabled: true;"
        background="color: #212"
        environment
        raycaster="objects: .raycastable;"
        **networked-scene**="
          app: myApp;
          room: room1;
          debug: true;
        "
      >
      <a-asset>
          {/* Avatar */}
          <template id="avatar-template">
            <a-entity class="avatar">
              <a-sphere
                class="head"
                color="#5985ff"
                scale="0.45 0.5 0.4"
              ></a-sphere>

              {/* ....... more code */}

            </a-entity>
          </template>
        </a-asset>
        
        {/* ....... more code */}

        {/* Checkpoint locomotion */}
        <>
          <a-entity
            id="Locomotion"
            movement-controls="controls:checkpoint"
            checkpoint-controls="mode:animate; animateSpeed: 10"
            position="0 1.5 0"
          >
            <a-camera
              id="player"
              networked="template:#avatar-template;attachTemplateToLocal:false;"
            >
              <a-cursor fuse="true" fuse-timeout="500"></a-cursor>
            </a-camera>
          </a-entity>
        </>
        <a-cylinder
          id="ground"
          src={floor}
          radius="30"
          height="0.1"
        ></a-cylinder>
        <a-sky id="background" src={sky} theta-length="90" radius="30"></a-sky>
      </a-scene>
    </React.Fragment>
  );
}

This is my vite configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['networked-aframe'],
  },
});

Thank you very much for the help.

I was expecting the networked-aframe server to run my react+vite app after the 'npm run build' command was executed. I have already tried running aframe applications made with pure html and they work, but those made with react+vite don't work.

0

There are 0 best solutions below