properly import assets

src/components/chatbubble.jsx

@@ -6,6 +6,8 @@ import { Html } from '@react-three/drei';
 import { AppContext } from '../App';
 import Color from 'color';
 import { Vector3 } from 'three';
+import messageBubbleModelURL from '../../assets/message-bubble.glb';
+import { meta } from '@eslint/js';
 
 export default function ChatBubble({ id, position, text }) {
     const meshRef = useRef();
@@ -74,7 +76,7 @@ export default function ChatBubble({ id, position, text }) {
             }
         }
     }, -2);
-    const { nodes } = useGLTF('../assets/message-bubble.glb');
+    const { nodes } = useGLTF(messageBubbleModelURL);
 
     let color = Color(active ? everforest.blue : everforest.purple);
     if (activatable) {

src/components/ground.jsx

@@ -1,11 +1,12 @@
 import { useRef } from 'react';
+import terrainModelURL from '../../assets/terrain.glb'
 import * as everforest from '../_everforest.module.scss'
 import { RigidBody } from '@react-three/rapier';
 import { useGLTF } from '@react-three/drei';
 
 export default function Ground() {
     const meshRef = useRef();
-    const { nodes } = useGLTF('../assets/terrain.glb');
+    const { nodes } = useGLTF(terrainModelURL);
     
     return (
         <RigidBody type='fixed' colliders="trimesh">

vite.config.js

@@ -9,4 +9,7 @@ export default defineConfig({
             '/api': 'http://localhost:5000',
         },
     },
+    assetsInclude: [
+       '**/*.glb', 
+    ], 
 })