THREE.js Cannot Import Module

Question

I am trying to import the threejs and GLTFLoader modules, both of which ( for testing ) are in the same root /js/ folder..

import * as THREE from './js/build/three.module.js'; // Works fine 
import { GLTFLoader } from './js/build/GLTFLoader.js'; // Throws a disallowed MIME TYPE error

I get the mimetype issue but the error isn't thrown when in the three master 'structure', so why doesn't this work?

EDIT:

So when uncommenting the import GLTF line, the error thrown is the following:

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

It seems to refer to the three.module.js path, however when that line is commented out, it all loads fine with no errors. The paths are correct for all files/folders too.

Answer 1

I realise my question was somewhat unclear but essentially what I was trying to do is use the modular three.js functionality whilst retaining the entire project in a single root folder - ie not having to traverse up to the 'build' files.

I feel like this is probably something that is often required (in the absence of webpack et al.) since a website would generally be contained within in a single root folder.

After some helpful input I was able to resolve this with the following..

The Folder Structure:

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

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

Hope this is of use to anyone searching for the same solution, and thanks as always to the community for the valued assistance!

Answer 2

this line

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

should be

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

and you should structure your three.js files to match the official three.js folder structure.

See this answer

And I want to make it very clear, @ScieCode's suggestion of editing the GLTFLoader.js is not a good suggestion. If you follow that suggestion you're going to have to start editing all files you use from example/jsm like the OrbitControls.js file, the TrackballControls.js file, the EffectComposer.js file (and all the files it includes like MaskPass.js, CopyPass.js, Pass.js). And, if you ever grab a new version you'll have to re-edit all those files again.

Instead just use the official folder structure as pointed out in the linked answer and stuff will just work, no editing needed.