4

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. enter image description here

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

Sam
  • 26,817
  • 58
  • 206
  • 383
  • Hi, please open a issue request on https://github.com/ritwickdey/vscode-live-server. I would like to help you. – Ritwick Dey Dec 13 '17 at 16:11
  • I had this same issue and emptying the cache worked for me. Although it's still propping up and then I need to empty the cache again. – H K May 06 '20 at 12:42
  • What do you mean with `refusing to load the bundle.js file `? Live Server is not a webserver but a browser-refresh-tool. Do you mean that a change of bundle.js does not reload the browser? I think that the extension cannot refresh on js files change if Iam right. – Timo Apr 26 '22 at 20:37

6 Answers6

2

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.

Vlad Macovei
  • 854
  • 1
  • 11
  • 13
2

if you've done the following:

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

replace it with:

<script src="main.js";> </script>
Praven Duncker
  • 19
  • 1
1

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.

Dharman
  • 30,962
  • 25
  • 85
  • 135
amani
  • 11
  • 1
0

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.

kinxiel
  • 793
  • 1
  • 5
  • 7
0

I had similar issue, only with html file and not js.

Solution

add the following live server setting in the visual studio code setting.JSON file:

"liveServer.settings.host": "localhost"

This way live server will use localhost rather than its default 127.0.0.1

I actually picked a hint regarding similar issue in another post I can find and credit..

OJNSim
  • 736
  • 1
  • 6
  • 22
-1

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.

Alan Sweeney
  • 11