What might be the reason for npm live-server to cease detecting file updates?

Everything was working perfectly on my system, but now I'm facing an issue. I have the live-server version 0.8.1 installed globally.

npm install live-server -g

However, when I start it, I no longer see the "Live reload enabled." message in the browser console.

I've tried uninstalling and reinstalling it, but that hasn't solved the problem.

The http server is functioning properly as it serves up my index.html and related content without any issues. The only problem is that it's not detecting file changes.

When starting live-server:

live-server --open=src

I am using typescript to output js files to src/dist/... and I have confirmed that the files are indeed changing. I even tried modifying the js directly, but live-server still doesn't detect any changes.

Could it be a file system permissions issue or a cached configuration problem?

What could be causing this unexpected behavior?

javascriptservernpm-live-server

Answer №1

After encountering the same issue, I came across a helpful exchange between Ritwick Dey (the creator of live-server) and another developer facing similar problems.

The solution turned out to be quite simple - avoiding the use of self-closing tags.

In my situation, while working with React, the problematic line in my HTML file looked like this:

<script src="/scripts/app.js" />

By changing it to the following format, I was able to resolve the issue immediately and see the "Live reload enabled" message in my Console, as well as regain hot reloading functionality:

<script src="/scripts/app.js"></script>

I hope this information proves to be useful for you as well.

(You can find the original conversation here: https://github.com/ritwickdey/vscode-live-server/issues/82)

Answer №2

It seems like there was a weird Chrome caching glitch happening. When I switched to using Safari, everything suddenly started working perfectly fine. After closing Safari, Chrome also started working smoothly again.

I'll just chalk this up to a strange environmental anomaly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a method to manually generate a cookie for Internet Explorer using InnoSetup?

Is there a way to manually create a cookie in InnoSetup on behalf of a specific website, such as www.stackoverflow.com, similar to how JavaScript cookies are stored? Javascript cookie: function setCookie(cname,cvalue,exdays) { var d = new Date(); d.s ...

javascriptwindowsinternet-explorercookiesinno-setup

The output from the Moment.js HTTP server is currently experiencing errors and is not displaying the expected

My first time working with JavaScript and the Momentjs library has not been smooth sailing. I am facing an issue where the output is not displaying as required. The goal is to show dates in the format "Day, date month year" (e.g., Tuesday, 14th May 2018). ...

javascriptnode.jsservermomentjs

Issue with AngularJS filter not functioning properly

I have a specific situation where I am using an ng-repeat directive in the following manner: {"ng-repeat" => "city in cities() | filter: search"} In this context, each city object is structured like so: { attributes: {name: 'Boston'} } Furt ...

javascriptjquerysearchloopsangularjs

What methods can be used to customize the font and background color of a website for different user groups?

Trying to incorporate a template into my project. My client has requested the following: The regular user area should feature a blue background. The professional user area should have an orange background. Is there a way to set up a condition to change ...

javascriptjqueryhtmlcsssass

Leveraging HTTP/2 in conjunction with angularJS

As I was exploring ways to improve the performance of my web application, I came across HTTP/2. After learning about its features that can enhance website speed, I decided to implement it. Upon upgrading my browser to the latest version to enable HTTP/2 s ...

javascriptangularjshttp2web-performance

iterating over a large multidimensional array in JavaScript

I am facing a challenge with handling a large JSON dataset (around 20k+ entries, totaling over 2mb) that I need to display on my web pages. Currently, I fetch this data using AJAX and parse it using JSON.parse in JavaScript, resulting in a complex multidi ...

javascriptarraysjsonmultidimensional-array

Search a database for a specific set of ObjectID using Mongoose

I'm currently developing an API using node.js, express, and mongoose. As I am still new to mongosse, I have been exploring different approaches to achieve what I need. In my database, I have two collections: users and expenses. Here's an exampl ...

javascriptnode.jsmongodbexpressmongoose

Safari's Failure to Execute Ajax Requests

My HTML page includes an ajax request that is functioning properly on Firefox, but does not work on Safari. While debugging, I noticed that the readystate is undefined and the status is "". Can anyone suggest why it might not be working on Safari? Javascr ...

javascriptajax

Guide to verifying the property value following mocking a function: Dealing with Assertion Errors in Mocha

Based on a recommendation from a discussion on this link, I decided to mock the readFileSync function and then mocked my outer function. Now, my goal is to verify whether the variable's value has been set as expected. file.js const fs1 = require ...

javascriptnode.jsunit-testingmocha.jssinon

Updating Angular model remotely without relying solely on the controller

I am struggling to call the addRectangleMethod method from my Javascript code in order to retrieve server-side information into the Angular datamodel. However, I keep encountering an error stating that the method I'm trying to call is undefined. It&ap ...

javascripthtmlangularjstypescript

Fetch a single random profile image from a Facebook user's list of friends using Javascript

I'm currently facing an issue with displaying a random profile picture of the user's friends on Facebook. I attempted to troubleshoot it myself but ended up crashing the login button and now it's not functioning properly. Can someone please ...

javascriptfacebookfacebook-javascript-sdk

Issue with model not being updated after making a request using $http service

I have a hunch as to why it's not functioning properly, but I'm unsure on how to troubleshoot this. Despite looking at similar questions and answers on SO, I am unable to resolve my issue. My goal is to trigger a service upon page load in order ...

javascriptangularjs

displaying only the date in bootstrap-datetimepicker

I am currently utilizing the repository created by smalot, and my intention is to choose and display dates only (while in other instances I showcase both date and time, hence utilizing this repository). Although I have succeeded in selecting dates only, th ...

javascriptjquerytwitter-bootstrapbootstrap-datetimepickersmalot-datetimepicker

Error code E11000 is thrown due to a duplicate key in a Node.js application

Whenever I input data on the webpage, it syncs correctly with the database. However, when I attempt to fill out the same form again, an error occurs: { "code": 11000, "index": 0, "errmsg": "E11000 duplicate key error collection: test.creates i ...

javascriptnode.jsmongodbexpress

Retrieving JSON data value without a key using AngularJS

I am struggling to retrieve a data value from a JSON array in Angular that does not have a key value. While I have come across examples of extracting values with keys, I haven't been able to crack this particular piece. The JSON returned from the API ...

javascriptjsonangularjs

Spinning html/css content using JavaScript

Greetings! I am currently working on a demo site using just HTML, CSS, and JavaScript. Typically, I would use Ruby and render partials to handle this issue, but I wanted to challenge myself with JavaScript practice. So far, I have created a code block that ...

javascripthtmlcss

Receiving a response from a Node.js server using an AJAX GET request

Here's a snippet of code from app.js that retrieves an aggregated value from mongo.db. I'm attempting to use this response value on my HTML page by making an AJAX call. However, I'm facing an issue where I can't retrieve the value in my ...

javascriptajaxnode.jsmongodb

Form submission is not possible while the login form is active

I'm encountering an issue where I am unable to trigger - ng-submit or ng-click on this code except for the local onclick function on the login button. If you have any insights or solutions, please share them: <form ng-submit = "login.submitLogin ...

javascriptjqueryangularjsformsangularjs-ng-click

Receiving JSON using Javascript and vue.js

When attempting to fetch json data in my vue.js application, I use the following code: new Vue({ el: 'body', data:{ role: '', company: '', list:[], ...

javascriptjsonvue.js

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

javascripthtmlcssajax