loading external javascript libraries

Question

I'm trying to deploy on a live server a small flask app that also uses javascript and some Three.js library files. When trying to import the required three.js files in my app.js file I get the 404 resource not found error. I'm using a digitalocean droplet and the folder structure is as follows:

app
├── __init__.py
├── static
│   ├── css
│   │   └── style.css
│   ├── js
│   │   └── app.js
|   |   └── three(folder with all the three library files)
│   └── models
│       └── poly_ann.glb
├── templates
│   └── index.html
└── views.py

the app.js is of type "module" in index.html. the top of the app.js looks like this:

import * as THREE from '/js/three/build/three.module.js';
import { GLTFLoader } from '/js/three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from '/js/three/examples/jsm/loaders/DRACOLoader.js';
import { GUI } from '/js/three/examples/jsm/libs/dat.gui.module.js';
    .
    .
    .

needless to say that as a pure html/javascript app on my local server these paths works just fine. As you can see the app.js file is sitting inside the static folder as all the tutorials suggest. The problem is pathfinding of three.js libraries. the three folder is sitting inside the js folder but it's not finding it for some reason. Any help will be appreciated.

Answer 1

It would be usefull to post the exact error but sometimes it help if you add a. before the slash, for example import { GUI } from '/js/three/examples/jsm/libs/dat.gui.module.js'; becomes import { GUI } from './js/three/examples/jsm/libs/dat.gui.module.js';