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?

Solution 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.

Solution 2

if you've done the following:

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

replace it with:

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

Comments

[Saikat Saha]

please clarify with more details