Javascript 模块在 github 页面上不起作用

Question

I build a project with a local server (using live server VS extension), who works fine.

In this project, I'm using javascript modules, so in index.html, I have:

<script src="js/index.js" type="module"></script>

And in index.js:

import {} from "/js/home.js";
import {} from "/js/filter.js";
import {} from "/js/scroll.js";

The issue come when I try to display the website using github pages. JS files seems not found and browser console return:

home.js:1 Failed to load resource: the server responded with a status of 404 () filter.js:1 Failed to load resource: the server responded with a status of 404 ()

I tried to change paths with no success, and I have no idea why all works good locally but not with github pages

Answer 1

Maybe dot in path helps you import {} from "./js/home.js";

Answer 2

As a relatively new coder, I had the same problem with my JavaScript modules.

My page worked in my local live server and wouldn't deploy on GitHub.

It may be that the path you used is not pointing to the proper location where your JS script is. Perhaps you need to use the relative path with the dot in front of the forward slash like ./ instead of /

This way, it points to your local repository folder.

I think if you just set it as the forward slash / , it points to your root directory of your GitHub pages instead of your local repository.

In my case, my web page loaded correctly after I changed my script source in my index.html from:

<script type="module" src="/js/main.js"></script>

To:

<script type="module" src="./js/main.js"></script>