# GLTFLoader + DRACOLoader + Svelte 5: Path error

**URL:** <https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125>\
**Category:** Questions\
**Tags:** draco-loader, gltf-loader, svelte, loaders\
**Created:** [October 23, 2024, 11:03am UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125 "2024-10-23T11:03:41Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 23, 2024, 11:03am UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/1 "2024-10-23T11:03:41Z")

</div>

Hello everyone,

I have a strange behavior that I can’t explain. I have built a small Svelte 5 app. Within my onMount method I create a small scene and try to load a 3D model (glb) using GLTF and DRACOLoader. In my local development environment, the object loads as desired and everything is available. Online, however, I have the problem that I get the following error:

[https://example.com/[object%20Object]](https://example.com/%5Bobject%20Object%5D) 404 (Not Found)

I am not completely new to web development and know that JS objects are displayed like that. However, I am not passing an object but a string.

Here is my code:

```javascript
import * as THREE from 'three';
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

...

draco = new DRACOLoader();
draco.setDecoderPath('/public/path/decoder/')
draco.preload()

loader = new GLTFLoader()
loader.setPath('/public/path/models/')
loader.setDRACOLoader(draco)
loader.load('bike.glb', ( gltf: any ) => {

...

})

```

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 23, 2024, 12:48pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/2 "2024-10-23T12:48:04Z")

</div>

/public is not a valid path, normally. the role of that folder is that its contents are copied into the /dist folder. when the project is served /public does not exist. given /public/foo.glb the url would become “/foo.glb” (or, ./foo.glb, if you have routes). you do not normally need to use setPath, it’s only needed for gltf which has to refer to external files.

---

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 23, 2024, 1:33pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/3 "2024-10-23T13:33:09Z")

</div>

Thank you for your reply!  
I should have mentioned that the app will be embedded in another page. Accordingly, it is not a standard Svelte app with SvelteKit or similar. Therefore, my files are not in the app itself, but on the server. My server root and public folder is actually “/public” (Symfony). In which I would like to store and use my models and decoders. So I have to specify the path accordingly, right?

I have also read that relative paths are not OK, but the error message remains the same for both variants. The error message that an object is appended to the URL therefore still puzzles me.

---

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 23, 2024, 1:38pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/4 "2024-10-23T13:38:49Z")

</div>

My last attempt looks like this:

```javascript
draco = new DRACOLoader();
draco.setDecoderPath('configurator/')
draco.preload()

loader = new GLTFLoader()
loader.setPath('configurator/')
loader.setDRACOLoader(draco)
```

These are the files that are public and accessible via [example.com/configurator/\*:](http://example.com/configurator/*:)

 ![root](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/d/7d9cd4423f6b534dc9b9c7257977e1075d411524.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 23, 2024, 1:44pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/5 "2024-10-23T13:44:20Z")

</div>

try this

```jsx
const draco = new DRACOLoader()
draco.setDecoderPath("https://www.gstatic.com/draco/versioned/decoders/1.5.5/")
const loader = new GLTFLoader()
loader.setDRACOLoader(draco)

loader.load("/configurator/bike.glb", ...

```

if it works it must be how draco wasm is set up. wrong files, broken files, empty files, wrong names, …

---

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 23, 2024, 1:55pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/6 "2024-10-23T13:55:16Z")

</div>

Locally, it continues to work perfectly with this code. Online I get the same errors. 😑

I have also noticed the following:  
with draco.preload():

 ![issue1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/9/492349cc10926d1f49c17ef427053a409748ea9c.png)

without draco.preload():  
 ![issue2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/625274558c06294c3e1dd8af83d3e074c488bba1.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [October 23, 2024, 4:45pm UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/7 "2024-10-23T16:45:05Z")

</div>

did you use the code i posted, just that and nothing else? there must be something otherwise that you didn’t post here, some code that forms a url to fetch.

and if not it perhaps is your build system. i take it you use vite, and you run “npm run build”, and copy the contents of the /dist folder to your server.

---

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 24, 2024, 6:28am UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/8 "2024-10-24T06:28:36Z")

</div>

I used the code exactly as you suggested. Yes, I use Vite to build with the following setting (Library Mode) to be able to embed it into an HTML page.

```javascript
export default defineConfig({
  build: {
    lib: {
      entry: path.resolve('./src/main.ts'),
      name: 'Configurator',
      fileName: 'configurator'
    },
    rollupOptions: {
      output: {
        dir: '../public/build/',
        entryFileNames: 'configurator.js'
      }
    },
  },
  plugins: [svelte()],
  resolve: {
    alias: {
      $lib: path.resolve("./src/lib"),
    },
  },
})
```

I upload the entire build (dist) folder in the public directory.  
It could probably be due to the build process. I’m just not sure how to solve the problem.

UPDATE:  
I have tried to embed the DRACOLoader and GLTFLoader via the HTML page itself and to access these instances in the code. Even with these (non-built) embeddings, the URL is resolved incorrectly when loading.

When debugging I see the URL, it seems to be only the error message / response that shows the [object%20Object]:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/0/60b19e0ede3ee254b120c13b8e8671014ce58b6f.png)

However, I do not seem to have access to it.

---

<div class="post-metadata">

**Author:** ![Doi](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@Doi](https://discourse.threejs.org/u/Doi)\
**Post date:** [October 24, 2024, 9:37am UTC](https://discourse.threejs.org/t/gltfloader-dracoloader-svelte-5-path-error/73125/9 "2024-10-24T09:37:36Z")

</div>

Okay, after 1 1/2 days of troubleshooting I found it and you will laugh. The customer works on the site himself and uses the stone-age library Mootools, which caused all the problems. 😌

@drcmda thank you very much for dealing with the problem 🙏