obtaining third-party JavaScript libraries

I'm encountering an issue while deploying a small Flask app that incorporates JavaScript and Three.js library files on a live server. I am facing a 404 resource not found error when attempting to import the necessary three.js files in my app.js file. The structure of my project directory on a DigitalOcean droplet is as follows:

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

The app.js file is specified as type "module" in index.html. Here is a snippet of the beginning of app.js:

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';
    .
    .
    .

When running this as an HTML/JavaScript application locally, these paths function correctly. The app.js file resides within the static folder, as recommended by various tutorials. However, the issue lies with locating the three.js libraries. Even though the three folder is located within the js folder, it seems unable to locate them for some reason.

Any assistance provided would be greatly appreciated.

Answer №1

Providing the specific error message would greatly assist in troubleshooting, but one potential solution is to include a period before the forward slash. For instance, instead of

import { GUI } from '/js/three/examples/jsm/libs/dat.gui.module.js';
, you can try
import { GUI } from './js/three/examples/jsm/libs/dat.gui.module.js';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding flair to a fresh element and then removing it upon its inception

I'm working with a JavaScript code that creates a new element when a button is clicked. I have a question about it. Here's the JavaScript code snippet: var comment = document.querySelector("#AddComment"); var req = new XMLHttpRequest(); if(comm ...

Send nodejs express static request over to secure https server

Is there a way to ensure all HTTP requests, including those for static files, are redirected to HTTPS? This is the code I currently have: app.use(express.static(__dirname + '/public')); app.get('*', function(req, res) { if (!req. ...

Where should I place my custom menu script in Wordpress and how do I do it?

I am currently exploring the realms of PHP, Wordpress, and Javascript as I endeavor to transform my website, crafted with CSS and HTML, into a dynamic theme for Wordpress using PHP. One particular feature on my site is an off-screen menu that smoothly ope ...

Creating a cube with rounded edges and corners using BufferGeometry and split vertices: a step-by-step guide

I am new to the world of THREE.JS and recently I created a cube by drawing 6 sides, each composed of two triangles. This resulted in a total of 6 vertices for each side, with the shared vertices split accordingly. I then proceeded to uv map a texture to ea ...

I'm facing a minor hurdle while trying to add bcrypt to my package.json

My project is underway and I've begun installing packages, but I ran into an error specifically while trying to install bcrypt. First attempt at installing bcrypt. npm install bcrypt Error encountered: > [email protected] install C: ...

List of strings that have been processed after completing the loop and returning the

I am looking to display multiple values on separate lines in a Vuetify snack bar. I have an object and I would like to show key value pairs individually like this: Brand: Porsche Model: Cayman Currently, the format is: Brand: Porsche, Model: Cayman Vi ...

The async and await functions do not necessarily wait for one another

I am working with Typescript and have the following code: import sql = require("mssql"); const config: sql.config = {.... } const connect = async() => { return new Promise((resolve, reject) => { new sql.ConnectionPool(config).connect((e ...

Looking for assistance with transferring a data attribute to a form redirection

I'm seeking assistance with a coding dilemma I've encountered. To provide some background, I have a list of items on my website, each featuring a 'Book Now' button that redirects users to different pages. Recently, I incorporated a mod ...

Creating a clone of JSON for use as a template

I am working with a json template that I fill with product data. Here is an example of the json structure: // product template $scope.productAttributes = { "Code": null, 'Attributes': {} }; When a user inputs produ ...

Delete a Woocommerce item from the shopping cart using ajax/fetch technology

My issue lies with the removal of products from the cart in Woocommerce, specifically involving WC_Cart::remove_cart_item. The error messages I am encountering are: POST http://localhost:3000/esport/wp-admin/admin-ajax.php [HTTP/1.1 500 Internal Server Err ...

What is the best way to initiate the handling of newly inserted values in a Vuex store?

I am working with a Vuex store that stores entries: const store = createStore({ state() { return { entries: [ { id: 1, date-of-birth: "2020-10-15T14:48:00.000Z", name: "Tom", }, ...

React final form does not support custom input values

Below is the code in question: ... return ( <FormItem key={name}> <Label htmlFor={id}>{camelCaseToTitleCase(fieldKey)}</Label> { fieldKey === 'homePhone' ? ...

JavaScript - Capture the Values of Input Fields Upon Enter Key Press

Here's the input I have: <input class="form-control" id="unique-ar-array" type="text" name="unique-ar-array" value="" placeholder="Enter a keyword and press return to add items to the array"> And this is my JavaScript code: var uniqueRowsArr ...

Is there a way to access comprehensive data pertaining to an ID through Ajax?

I need help with an Ajax call. Below is the code I currently have: $.ajax({ async: true, url: 'test/', type: 'POST', datatype: 'text json', data: { id: id, }, success: function(data) { // Retrieve the da ...

The method provided by the FullScreen API is not effective in cancelling the fullscreen mode

After testing my code in Google Chrome, I encountered the following error message: Uncaught TypeError: Object #<HTMLDivElement> has no method 'webkitCancelFullScreen' Interestingly, I also received a similar error while running the code i ...

Contrast the values extracted from an array of objects with a string in React Native/Javascript

I am attempting to implement an If statement to compare a property from an object in an array with a String. I have set up a for-loop, but for some reason, the conditional statement does not seem to be triggering. Below is the code snippet I am using to sa ...

showing the values stored in local storage

My goal is to show only the values stored in local storage, excluding the key value that displays all data after submitting the login form. welcome <span id="demo"></span>; <script> document.getElementById('demo').innerHTML = ...

Documentation for Lambda function within an object

Looking to properly document the sock and data variables using JSDoc in my code. var exec = { /** * @param {Number} sock * @param {String} data */ 1: (sock, data) => { console.log("GG"); }, 2: (sock, data ...

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

Exploring the process of setting up separate tables in db_session within a Flask application using Pony ORM

Trying to organize two aspects within a model folder is posing a challenge for me. I am encountering the following error: "pony.orm.core.ERDiagramError: Cannot define entity 'Guest': database mapping has already been generated." Here is the rele ...