Problems with ES6 Imports in threejs using node 14? (No Webpack or Babel)

Questions
, ,
1

(Posting this here because stackoverflow seemed to not have the answer, maybe because of the specifity of the environment.)

Does anyone have problems with using ES6 Imports in three.js? this is without Webpack or Babel, but nodes inbuilt functionality in Node 12’s experimental features or 14. Is it recommended i just don’t use node with es6 imports atm?

I cant access three as a module for example, to import external controls, loaders etc. //import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"; It tells me failed to load resource

Relative references must start with either “/”, “./”, or “…/”.

But if I were to use relative imports either import {OrbitControls} from "../../node_modules/three/examples/jsm/controls/OrbitControls.js";

it is not found. (404 Error).

Even when I were to paste it into the js folder (which surely defeats the point of the threejs npm module?) there are mutiple imports inside the OrbitControls.js inside the jsm folder. so i receive a

GET http://localhost:5000/build/three.module.js net::ERR_ABORTED 404 (Not Found)

error inside OrbitControls.js line 18.

Also, my script file for index.js is indeed set to “type: module” in the html.

I really apologise if this question sounds ranty, its just that Ive asked and answered this question before and I want to cover everything so that I can understand what is going on. Thanks vm.

also here is my folder structure
file structurer

2

I may be completely lost here - but if you are using node, you can’t get an HTTP error like 404 Not Found. Node isn’t a server, it’s a runtime. Seems to me like you are using Express or a similar node HTTP server?

If it’s index.html that loads index.js that THEN loads three/examples/.., then server.js must either serve the entire node_modules/ (I assume it only serves what’s in public/ directory?) or you should move node_modules/threejs to public and adjust import path accordingly (to ./threejs/examples/.. or similar)

Long story short - the error seems to have nothing to do with node or ES6 imports, it’s the code inside server.js that’s causing trouble.

1 Like
3

Seems to me like you are using Express or a similar node HTTP server?

Yes, sorry i should have mentioned this actually.

Wow, Yes thats it. Im using _dirname to server the public folder! Thats it! Im not so knowledgable about the back end. Thanks for clearing that up for me. This was alot of help.

1 Like
4

See how I do it in this boilerplate
It uses ES6 imports, and not webpack, babel or anything else. Well, except the typescript compiler for generating both the client and server side scripts.

1 Like