JS file not loading on Live Server in VS Code

Question

I'm beginning to use VS Code so I don't have a lot of experience with it. Looks like I need to add everything I need manually. Coming from Visual Studio, this is a bit strange in the beginning, though I see the benefits.

I picked Live Server (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) as the web server for my projects I'll be working on in Visual Studio Code. Not sure if this is a good choice but it was highly rated.

Here's the problem I'm having: when I start the Live Server, I can pull up my html file in the root but Live Server is refusing to load the bundle.js file which is also in the root folder.

It doesn't load bundle.js file through index.html page which references this js file. It also refuses to load it if I simply type the URL for bundle.js in the browser i.e. http://127.0.0.1:5500/bundle.js. When I try to access the bundle.js file through the browser, I get:

Cannot GET /bundle.js

I see the following when I launch developer tools in Chrome but when I go to the actual folder, I see that the file is there.

Any idea why this is happening and how to solve it?

Answer 1

This question might be old but i encountered the same problem while switching from XAMPP to the Live Server extension. The script tags loaded fine in XAMPP but gave 404 on Live Server. The problem turns out to be the relative path format.

I had:

src="/main.js"

And it has to be:

src="./main.js"

With a dot.

Answer 2

if you've done the following:

<script> src="main.js"; </script>

replace it with:

<script src="main.js";> </script>

Answer 3

I also had this problem. Might be some problem with the Live-Server VS Code extension. I believe if you use the command line live-server in your directory which contains the index.html file, it should work.

Answer 4

I believe this problem is that you can see the output of HTML in live-server but you cannot see the JS output in live server, if that is your question , my reply is : you donyt need live server for the JS file , but you go directly to the cosole, i.e, you do two files , one html and the other is js, and connect both by mentioning the src path of the js file on the html and show the website on life server, then right click :inspect, then go to element , close to element theres the console, you change in js file through changes in the console.

Answer 5

When I placed the js file in a sub folder named "js" in this case, making the call using the above example js/main.js. It worked.