Project works in local host but not on Github

Questions
,
1

I finished my project on my computer and it runs on my local host. After I uploaded it in GitHub website, the page can not load three js module and other modules I tried to import in js file, showing error 404.

The page I’m trying to open: https://xiyalixiya.github.io/installation.html
link to repository: GitHub - xiyalixiya/xiyalixiya.github.io

imports in my js:

import * as THREE from './node_modules/three/build/three.module.js';
import { OrbitControls } from './node_modules/three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from './node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import {SkeletonUtils} from './node_modules/three/examples/jsm/utils/SkeletonUtils.js';

I tried different path file in the js file(including “. . /” “. . /main/”…), but still the page can not load three, orbit control, gltf loader, skeleton util. I don’t have to do all these steps in my local host, not really sure why it’s so hard to point to files on github pages.

Any suggestions are appreciated~ thx~

2

Since you are in a subdirectory of you site you should remove ./ Or / or …/ anything

Do it like this have a try

import * as THREE from 'node_modules/three/build/three.module.js';
import { OrbitControls } from 'node_modules/three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'node_modules/three/examples/jsm/loaders/GLTFLoader.js';
import {SkeletonUtils} from 'node_modules/three/examples/jsm/utils/SkeletonUtils.js';
3

I tried this combinations before and it gives error saying it does not resolve to a valid URL

Screenshot 2023-08-19 at 12.22.02
Screenshot 2023-08-19 at 12.22.021596×136 11.7 KB

4

You can include three.js via cdn

Go to three.js installation page and use import map and use everything as usual

Pros :
This way your site may load faster 'cause if anyone has visited a site that includes three.js library browser stores static content as cache

5 
import * as THREE from '../build/three.module.js';
import { OrbitControls } from '/build/OrbitControls.js';
import { GLTFLoader } from '/build/GLTFLoader.js';
import {SkeletonUtils} from '/build/SkeletonUtils.js';

I created a separate folder and had to name it ‘build’ so that modules can be imported correctly. I’m not even sure why it works this way but it does

6

Oh I also had that problem once but I don’t know why after shortening the path things works fine

7

You can never import from node modules directly, it would also make very little sense to copy stuff to a build folder. Just use three as it is written in the docs. In order to consume npm you need a build tool, like vite. It has something called a resolver, it knows what “three” is and finds it in your node modules, it also tries to only include the code that is actually used in your end bundle. Node modules are for local dev only, they are never uploaded anywhere or directly accessed by code.

1 Like