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.