Live Server: fix `Live Reload is not possible without a head or body tag.`

Copy of my response for reference: github.com/ritwickdey/vscode-live-server/issues/22 where someone stated: "Live Reload is not possible as body or head tag or defined tag is missing in HTML" warning shows on every reload #22 Every time I save a watched file, my page reloads, but in VS code the warning appears "Live Reload is not possible as body or head tag or defined tag is missing in HTML". I have to close the warning every time (very annoying) and there is no option to disable this warning. Live Server extension depends on the github.com/tapio/live-server package. In short: params are sent from Live Server to live-server. params includes callback that shows message Live Reload is not possible without a head or body tag. If your code imports any file with extension "", ".html", ".htm", ".xhtml", ".php", ".svg" and the file does not have any of the tags , , , this message is shown. If you are annoyed with this PopUpMsg: open Live Server extension source code in vscode (on Windows C:\Users\your-user\.vscode\extensions\ritwickdey.liveserver-5.7.9) -> file appModel.js -> change: // from let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => { this.tagMissedCallback(); }); // to empty callback let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => {}); // or to this if you want to log this message instead of seeing a popup // before "class AppModel {" add const out = vscode_1.window.createOutputChannel("Live Server 5.7.9"); // change params to let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => { out.appendLine('Live Reload is not possible without a head or body tag.'); }); Save the changes -> in your project where you Go Live hit Ctrl+Shift+P or View -> Command Pallette... -> type Developer: Reload Window to re-sync the extensions -> click Go Live and see this or nothing depending on which callback you have chosen in the previous step: You would likely also want to disable Auto Update of this extension in order to keep the changed logic. All behaviour is based on this code (excerpts from various parts): // ========================== // in Live Server appModel.js class AppModel { // ... tagMissedCallback() { this.showPopUpMsg('Live Reload is not possible without a head or body tag.', null, true); } Golive(pathUri) { // ... let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => { this.tagMissedCallback(); }); LiveServerHelper_1.LiveServerHelper.StartServer(params, ...) // ... } // ... }; // ========================== // in Live Server LiveServerHelper.js let ServerInstance = require('live-server').start(params); // ========================== // in live-server index.js function staticServer(root, onTagMissedCallback) { return function (req, res, next) { // ... var injectCandidates = [ new RegExp("", "i"), new RegExp(""), new RegExp("", "i") ]; function file(filepath /, stat/) { var x = path.extname(filepath).toLocaleLowerCase(), match, possibleExtensions = ["", ".html", ".htm", ".xhtml", ".php", ".svg"]; // ... var contents = fs.readFileSync(filepath, "utf8"); for (var i = 0; i

Mar 14, 2025 - 12:54

Live Server: fix `Live Reload is not possible without a head or body tag.`

Copy of my response for reference:
github.com/ritwickdey/vscode-live-server/issues/22 where someone stated:

"Live Reload is not possible as body or head tag or defined tag is missing in HTML" warning shows on every reload #22
Every time I save a watched file, my page reloads, but in VS code the warning appears "Live Reload is not possible as body or head tag or defined tag is missing in HTML". I have to close the warning every time (very annoying) and there is no option to disable this warning.

Live Server extension depends on the github.com/tapio/live-server package.

In short: params are sent from Live Server to live-server. params includes callback that shows message Live Reload is not possible without a head or body tag. If your code imports any file with extension "", ".html", ".htm", ".xhtml", ".php", ".svg" and the file does not have any of the tags , , , this message is shown.

If you are annoyed with this PopUpMsg: open Live Server extension source code in vscode (on Windows C:\Users\your-user\.vscode\extensions\ritwickdey.liveserver-5.7.9) -> file appModel.js -> change:

// from
let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => {
    this.tagMissedCallback();
});

// to empty callback
let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => {});

// or to this if you want to log this message instead of seeing a popup
// before "class AppModel {" add
const out = vscode_1.window.createOutputChannel("Live Server 5.7.9");
// change params to 
let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => {
    out.appendLine('Live Reload is not possible without a head or body tag.');
});

Save the changes -> in your project where you Go Live hit Ctrl+Shift+P or View -> Command Pallette... -> type Developer: Reload Window to re-sync the extensions -> click Go Live and see this or nothing depending on which callback you have chosen in the previous step:

You would likely also want to disable Auto Update of this extension in order to keep the changed logic.

All behaviour is based on this code (excerpts from various parts):

// ==========================
// in Live Server appModel.js

class AppModel {
    // ...
    tagMissedCallback() {
        this.showPopUpMsg('Live Reload is not possible without a head or body tag.', null, true);
    }
    Golive(pathUri) {
        // ...
        let params = Helper_1.Helper.generateParams(pathInfos.rootPath, workspacePath, () => {
            this.tagMissedCallback();
        });
        LiveServerHelper_1.LiveServerHelper.StartServer(params, ...)
        // ...
    }
    // ...
};    

// ==========================
// in Live Server LiveServerHelper.js
let ServerInstance = require('live-server').start(params); 

// ==========================
// in live-server index.js
function staticServer(root, onTagMissedCallback) {
    return function (req, res, next) {
        // ...
        var injectCandidates = [
            new RegExp("", "i"),
            new RegExp(""),
            new RegExp("", "i")
        ];

        function file(filepath /*, stat*/) {
            var x = path.extname(filepath).toLocaleLowerCase(), match, possibleExtensions = ["", ".html", ".htm", ".xhtml", ".php", ".svg"];
            // ...
            var contents = fs.readFileSync(filepath, "utf8");
            for (var i = 0; i < injectCandidates.length; ++i) {
                match = injectCandidates[i].exec(contents);
                if (match) {
                    injectTag = match[0];
                    break;
                }
            }
            if (!injectTag && onTagMissedCallback) {
                onTagMissedCallback();
            }
            // ...
        }
    } 
}