Module import error in THREE.js

Question

Module import error in THREE.js

Currently, I am attempting to bring in the threejs and GLTFLoader modules into my project. Both of these modules (just for testing purposes) are located within the same root/js/ directory.

import * as THREE from './js/build/three.module.js'; // Importing THREE module works without any issues 
import { GLTFLoader } from './js/build/GLTFLoader.js'; // Attempting to import GLTFLoader throws a MIME TYPE error

I understand that there is a mimetype problem, however, it's strange that this error does not occur when using the standard three master 'structure'. Can anyone explain why this doesn't work?

EDIT:

Upon uncommenting the GLTF import line, the following error message is displayed:

Loading module from “http://localhost/dev/project/build/three.module.js” 
was blocked because of a disallowed MIME type (“text/html”).

The issue seems to be related to the path of three.module.js file, but surprisingly everything loads correctly with no errors when this line is commented out. Rest assured, all paths for files and folders are accurate.

javascript three.js

Answer 1

Answer №1

My initial question may have been unclear, but essentially I was looking to leverage the modular functionality of three.js while keeping my entire project within a single root folder, avoiding the need to navigate up to the 'build' files.

This is a common requirement, especially when not using webpack or similar tools, as most websites are typically contained within a single root folder.

With some helpful advice, I was able to address this issue as follows:

Folder Structure:

root/
 |
 | -- index.html
 |
 |
 | -- /build/
 |      |
 |      | -- three.module.js 
 |
 |
 | -- /js/
        |
        | -- app.js*
        |
        | -- /jsm/
               |
               | -- /libs/ ...        
               | -- /loaders/ ...

Imports (in app.js):

import * as THREE from '../build/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { TWEEN } from './jsm/libs/tween.module.min.js';
import Stats from './jsm/libs/stats.module.js';

I hope this solution is helpful for anyone facing a similar challenge, and I would like to express my gratitude to the community for their assistance!

Answer 2

My initial question may have been unclear, but essentially I was looking to leverage the modular functionality of three.js while keeping my entire project within a single root folder, avoiding the need to navigate up to the 'build' files.

This is a common requirement, especially when not using webpack or similar tools, as most websites are typically contained within a single root folder.

With some helpful advice, I was able to address this issue as follows:

Folder Structure:

root/
 |
 | -- index.html
 |
 |
 | -- /build/
 |      |
 |      | -- three.module.js 
 |
 |
 | -- /js/
        |
        | -- app.js*
        |
        | -- /jsm/
               |
               | -- /libs/ ...        
               | -- /loaders/ ...

Imports (in app.js):

import * as THREE from '../build/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { TWEEN } from './jsm/libs/tween.module.min.js';
import Stats from './jsm/libs/stats.module.js';

I hope this solution is helpful for anyone facing a similar challenge, and I would like to express my gratitude to the community for their assistance!

Answer 3

Answer №2

This specific line of code needs to be adjusted:

import { GLTFLoader } from './js/build/GLTFLoader.js';

You should change it to:

import { GLTFLoader } from './js/examples/jsm/loaders/GLTFLoader.js';

Furthermore, ensure that your organization of three.js files aligns with the official three.js folder structure.

For more details, refer to this helpful answer.

I want to emphasize that modifying the GLTFLoader.js file, as suggested by @ScieCode, is not advisable. It would necessitate editing multiple other files such as OrbitControls.js, TrackballControls.js, and EffectComposer.js whenever you update versions. By adhering to the recommended folder structure outlined in the provided link, you can avoid unnecessary edits and complications.

Answer 4

This specific line of code needs to be adjusted:

import { GLTFLoader } from './js/build/GLTFLoader.js';

You should change it to:

import { GLTFLoader } from './js/examples/jsm/loaders/GLTFLoader.js';

Furthermore, ensure that your organization of three.js files aligns with the official three.js folder structure.

For more details, refer to this helpful answer.

I want to emphasize that modifying the GLTFLoader.js file, as suggested by @ScieCode, is not advisable. It would necessitate editing multiple other files such as OrbitControls.js, TrackballControls.js, and EffectComposer.js whenever you update versions. By adhering to the recommended folder structure outlined in the provided link, you can avoid unnecessary edits and complications.

Module import error in THREE.js

EDIT:

Answer №1

Answer №2

Similar questions

Incorporate a class into the fixed navigation menu using fullpage.js

Image not showing up when using drawImage() from canvas rendering context 2D

On the second attempt to call setState within the componentDidMount method, it is not functioning as expected

Managing data in Vuex by updating it from a child component using $emit

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

Exploring the Possibilities of OpenLayers with Scalable Vector

Having issues with the right margin in HTML5 canvas and struggling to remove the scroll bar

Axios mistakenly sending DELETE requests before GET requests

Create specification for the properties of the child component

What is the best way to ensure a navigation link stops scrolling at the bottom of a navbar that is set to position: sticky?

Prevent JavaScript from sending a POST request to a specific URL

Would you suggest using angularjs for authentication in large-scale applications?

JavaScript: Receiving an error that function is undefined when working with data binding

The synchronization and network bandwidth optimization of Angular and Firebase's three-way binding system

Currently, I am working on developing a Discord bot using discord.js within Visual Studio Code. So far, all of the commands that I have implemented are functioning properly except for one. This specific command is a

What is the process for including an optional ngModelGroup in Angular forms?

Can SailsJS be used exclusively for API processes?

Identify all paths with or without the .html suffix, excluding static resources

How can I use Java script to find specific text within table rows on a website?

Implement a smooth transition effect when changing the image source