Three.js not loading gltf file

I was using three.js with svelte for a project and when I try to load a 3d model the server returns with 404 not found. here is my code to load the file(Scene.js)

import * as THREE from 'three';import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';const loader = new GLTFLoader();const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);loader.load('../model/room.gltf', function (gltf){   scene.add(gltf.scene);}, undefined, function(error){   console.log("error: ",error);});let renderer;camera.position.z = 5;const resize = () => {    renderer.setSize(window.innerWidth, window.innerHeight)    camera.aspect = window.innerWidth / window.innerHeight;    camera.updateProjectionMatrix();};export const createScene = (el) => {    renderer = new THREE.WebGLRenderer({ antialias: true, canvas: el });    resize();}window.addEventListener('resize', resize);

this is the svelte file which I include the scene in(Main.svelte)

<script>import {onMount} from 'svelte';import {createScene} from "../Scene/Scene"let el;onMount(() => {    createScene(el);})</script><canvas bind:this={el}></canvas><style></style>

this is the project structureproject structure

and this is the error (ignore the bundle CSS error), also the code works when I use three.js built-in geometry.console error

Thank you.