Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Live Reload is not possible as body or head tag or defined tag is missing in HTML" warning shows on every reload #22

Closed
skelesp opened this issue Sep 10, 2017 · 47 comments
Assignees

Comments

@skelesp
Copy link

skelesp commented Sep 10, 2017

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.

@ritwickdey
Copy link
Owner

okay! It's added in new version. Add or tag in html. It will disappear.

@ritwickdey
Copy link
Owner

Without or tag live reload is not possible.

@ritwickdey
Copy link
Owner

ritwickdey commented Sep 10, 2017

Have you meant that? or am I getting wrong point? Let me know.

If you have better suggestion, you're also welcome.

@skelesp
Copy link
Author

skelesp commented Sep 10, 2017

  1. I don't understand the current behaviour, because the warning is saying that live reload won't work, but it is working... So, I think the warning comes at the wrong time. So this might be a bug... (or I don't fully understand the purpose of the warning :-) )

  2. If this tag-problem occurs, I think it's better to show the warning only once in VS code and not on every save. And it might be better to show the warning in the console.

@ritwickdey
Copy link
Owner

Okay! I understand. And definitely as I always give priority on feedback, I am adding a settings so that we can turn off the warring message.

And If it is bug, can you tell me that what platform you are using? and please give a try as follow : ->

  1. Make a new folder
  2. Create a new HTML file.
  3. Open the folder to VSCODE
  4. type exclamation sign (!) and tab. (Emmet Snippet)
  5. Start Live Server.

And now please tell me, is this working? or you're still getting the warning?.

@ritwickdey ritwickdey self-assigned this Sep 10, 2017
@ritwickdey
Copy link
Owner

I want to know if it is a bug or not before releasing new version. Because it is working on my Windows 10

@skelesp
Copy link
Author

skelesp commented Sep 10, 2017

It is working (without a warning) when I create a new file in new folder. So there must be something wrong in my file?

The structure of my file is :

<!DOCTYPE html>
<html ng-app="TestApp">
	<head>
        </head>
        <body ng-controller="testCtrl">
        </body>
</html>

So I think there shouldn't be a warning, because I have head and body tags?

(I'm also working in windows 10)

@ritwickdey
Copy link
Owner

ritwickdey commented Sep 10, 2017

Is this not working for you?........ I tried....

<!DOCTYPE html>
<html ng-app="TestApp">
	<head>
        </head>
        <body ng-controller="testCtrl">
        </body>
</html>

it is working for me....

@skelesp
Copy link
Author

skelesp commented Sep 10, 2017

yes, it works if I try it with that simple structure, but with my complete code, it is still showing the warning.

Does it matter which code is between the head and body tags? I would expect that the existence of head/body-tags is enough? But apparently, some of my code between the head-tags or the body-tags is triggering that warning...

ritwickdey added a commit that referenced this issue Sep 11, 2017
@ritwickdey
Copy link
Owner

This issue has been fixed with v2.1.1 update. Please update it from vscode marketplace 😄.

If you like the extension, please drop a review to vscode marketplace.

@rjoydip-zz rjoydip-zz added closed and removed closed labels May 14, 2018
@irakliykech
Copy link

irakliykech commented Dec 24, 2018

vscode-error
vscode-error_second

Hello. Sorry for request, but I have same problem with LiveServer. When I create new document, type (!) and tab, VSCode create base html structur automaticly. But if i add some tags in head or body, than LiveReload warning than "Live Reload is not possible without body or head tag."

@martonberecz
Copy link

Same issue here. As per above.

@jonas-girdzijauskas
Copy link

jonas-girdzijauskas commented Aug 3, 2019

Same issue here. As per above.
@martonberecz
I think I found a solution - try creating the html file in the file explorer instead of powershell/terminal.

@meberg
Copy link

meberg commented Aug 21, 2019

I had the same problem. I just "solved" it by pressing 'I understand - don't show again'.

@gordwelling
Copy link

I had the same problem. I just "solved" it by pressing 'I understand - don't show again'.

I had the same problem and tried the same step to 'Don't show again'. I had to reload the page in the browser and then make a change to the html file and save it in VSCode.

@ChrisColeTech
Copy link

My HTML has body and head tag, and I am still getting the message ...

@Adam-Ponting
Copy link

I have just had the same problem having not had an issue for 12+ months.
A new .html file with exactly the same content would work so slightly confused. Ended up deleting my index.html and creating a new one then pasting the content over and it worked.
As a side note - my original .html file was created in the terminal and my "working" .html created in VSC as referenced above.
Strange one.

@acestronautical
Copy link

Also having this problem

index (copy).html.txt

@vpopescu
Copy link

I've seen issues with the file encoding (UTF-16 has caused it to complain about HEAD or BODY missing)

@Tronic
Copy link

Tronic commented May 24, 2020

I'm working with HTML5 which doesn't need these tags, and should have Live Server's snippet simply appended to the end of the document. Could you change the extension so that if </body> is not found, it just adds its code to the end and doesn't give this warning?

@henk9
Copy link

henk9 commented Jun 24, 2020

I̵ ̵b̵e̵l̵i̵e̵v̵e̵ ̵t̵h̵i̵s̵ ̵m̵i̵g̵h̵t̵ ̵b̵e̵ ̵a̵ ̵p̵r̵o̵b̵l̵e̵m̵ ̵w̵i̵t̵h̵ ̵t̵h̵e̵ ̵e̵x̵t̵e̵n̵s̵i̵o̵n̵ ̵"̵B̵r̵o̵w̵s̵e̵r̵ ̵P̵r̵e̵v̵i̵e̵w̵"̵ ̵a̵t̵ ̵h̵t̵t̵p̵s̵:̵/̵/̵m̵a̵r̵k̵e̵t̵p̵l̵a̵c̵e̵.̵v̵i̵s̵u̵a̵l̵s̵t̵u̵d̵i̵o̵.̵c̵o̵m̵/̵i̵t̵e̵m̵s̵?̵i̵t̵e̵m̵N̵a̵m̵e̵=̵a̵u̵c̵h̵e̵n̵b̵e̵r̵g̵.̵v̵s̵c̵o̵d̵e̵-̵b̵r̵o̵w̵s̵e̵r̵-̵p̵r̵e̵v̵i̵e̵w̵.̵ ̵B̵u̵t̵ ̵I̵ ̵a̵d̵m̵i̵t̵ ̵i̵t̵ ̵i̵s̵ ̵j̵u̵s̵t̵ ̵a̵ ̵g̵u̵e̵s̵s̵ ̵-̵ ̵I̵ ̵h̵a̵v̵e̵ ̵n̵o̵t̵ ̵d̵u̵g̵ ̵d̵e̵e̵p̵ ̵i̵n̵t̵o̵ ̵i̵t̵.̵
̵O̵n̵e̵ ̵w̵a̵y̵ ̵t̵o̵ ̵s̵e̵e̵ ̵i̵f̵ ̵m̵y̵ ̵h̵u̵n̵c̵h̵ ̵i̵s̵ ̵r̵i̵g̵h̵t̵,̵ ̵w̵o̵u̵l̵d̵ ̵b̵e̵ ̵t̵o̵ ̵i̵n̵v̵e̵s̵t̵i̵g̵a̵t̵e̵ ̵i̵f̵ ̵t̵h̵i̵s̵ ̵i̵s̵s̵u̵e̵ ̵e̵v̵e̵r̵ ̵o̵c̵c̵u̵r̵s̵ ̵w̵h̵e̵n̵ ̵t̵h̵e̵ ̵L̵i̵v̵e̵ ̵S̵e̵r̵v̵e̵r̵ ̵e̵x̵t̵e̵n̵s̵i̵o̵n̵ ̵s̵e̵t̵t̵i̵n̵g̵ ̵"̵U̵s̵e̵ ̵B̵r̵o̵w̵s̵e̵r̵ ̵P̵r̵e̵v̵i̵e̵w̵"̵ ̵i̵s̵ ̵u̵n̵c̵h̵e̵c̵k̵e̵d̵.̵
ONE work-around that works for me, whether you like it or not, is to click the reload button of the "Preview" browser.

@mrmatata
Copy link

mrmatata commented Jul 17, 2020

it happened to me too and it was very irritating so i turned it off from settings.json

"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags":true,

@Tronic
Copy link

Tronic commented Jul 22, 2020

it happened to me too and it was very irritating so i turned it off from settings.json

"liveServer.settings.donotVerifyTags": off,

How did you get this working? It would appear that this takes true or false rather than off but I couldn't get rid of the warning or get live reloads working with any value.

@mrmatata
Copy link

it happened to me too and it was very irritating so i turned it off from settings.json
"liveServer.settings.donotVerifyTags": off,

How did you get this working? It would appear that this takes true or false rather than off but I couldn't get rid of the warning or get live reloads working with any value.

i think this did it for me
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.donotVerifyTags":true,

@Tronic
Copy link

Tronic commented Jul 29, 2020

@mrmatata That gets rid of the message but auto reloading still doesn't work unless there is </body> in the document (no other tags are needed).

@ryancbolton
Copy link

I had the same problem. I just "solved" it by pressing 'I understand - don't show again'.

This somehow fixed it for me a s well, btw I know this is old but still happening in version 5.6.1

@christian-white1
Copy link

Hey everyone, so today I got the live server to work by downloading an older version (v 1.0) and it worked so far. I'm not getting that dreaded live server needs a head or body tag message and more importantly my webpage reloads without me having to hit ctrl + R (or F5). I haven't received any issues, you can give a try and let me know

@christian-white1
Copy link

For anyone downloading an older version, please note that you'll have to make consistent changes for the web page to refresh by itself. In other, words if you take a break from coding you'll probably have to refresh the page a couple times after making a change, usually I have to manually refresh 3 times before live server works.

@stephennickalls
Copy link

I have just had the same problem having not had an issue for 12+ months.
A new .html file with exactly the same content would work so slightly confused. Ended up deleting my index.html and creating a new one then pasting the content over and it worked.
As a side note - my original .html file was created in the terminal and my "working" .html created in VSC as referenced above.
Strange one.

Yep - had stopped working after I started creating the bulk of my structure ahead of time in the terminal. Fixed by deleting .html files and using the New File GUI in VS Code to recreate and paste over code.

@Amosi-04-sanga
Copy link

Amosi-04-sanga commented Sep 4, 2021

the same to me!

@phoenixeliot
Copy link

I find that I get this erroneous message if I have an invalid import in a CSS file that is imported by the CSS file imported in my HTML.

In particular, a line was trying to import a folder, and one was trying to import by name without .css, and fixing/removing those removed the warning message:

@import url(../blocks/footer/__columns/_content/);
@import url(../blocks/header/__square-pic/header__square-pic);

@nanyou225
Copy link

why the {% load static %} tag
is still displayed in my html page?

@Casonyx
Copy link

Casonyx commented Dec 13, 2021

Idk guys but I got this error too.
So I got it when fixed my webpack.config. Lol. I didn't notice that my loader has two svg handlers. I fixed it and the error disappeared.

@melindamorales
Copy link

helloo, i received this error message today every time i reload my live server. i have both head tags and body tags so this issue is still happening today it seems.-.

@roke741
Copy link

roke741 commented Apr 3, 2022

Hello, I also had the error, but I think I solved it, simply add the tag and in the extension settings, look for Live Server>Settings: Custom Browser, in my case select microsoft edge, because it is the that I usually use to observe the changes, and finally restart VS code, with that I solve the problem, I hope it works for you

@neospud1
Copy link

I solved it by changing the html file's encoding in the VSCode.
Click current encoding
image
Click save with encoding
image
Click UTF-8
image

@CAPI-48
Copy link

CAPI-48 commented May 6, 2022

I solved it by changing the html file's encoding in the VSCode. Click current encoding image Click save with encoding image Click UTF-8 image

Thanks it worked!
Also need to run server again.

@chillgiova
Copy link

I had this problem randomly appeared after 1 year. I finally solved it, it was and @import row in the style.css file. This was the specific row: @import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';

@Ramjius
Copy link

Ramjius commented Oct 21, 2022

It is because you have made a media query on your file and your display screen/window is in that size, and since you don't have a body or head in your media query----That's why!!! Had a similar case, try resizing your window, save and see.

@nafismahamudshahin
Copy link

Screenshot_4
This is my problem please help me

@wegaro
Copy link

wegaro commented Aug 18, 2023

Same problem as above right now, my structure has head and body tag, so I don't know what it refers too. Any ideas?

@overholted
Copy link

I had this problem, too. I opened my .scss file, saved it and my extension recompiled the CSS. The pop-up is now gone.

@Sarveshreg
Copy link

Make sure that your HTML tab is active, not the CSS or JS!

@justingolden21
Copy link

Same issue as above. I previously never had this issue. It's a simple html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Project</title>
  </head>
  <body>
    hello
  </body>
</html>

image

It's a syntactically valid HTML file with head and body tag, and it serves other html files in the directory fine. The HTML tab is active and works when I open it without live server.

@WeaponXiii
Copy link

@justingolden21 it might be the utf-16 LE encoding issue. I created the file using ps7 prompt using Out-File cmdlet. Never had this issue crating empty file from command prompt though. Check these answer by @neospud1

I solved it by changing the html file's encoding in the VSCode. Click current encoding image Click save with encoding image Click UTF-8 image

@yeon-dong
Copy link

yeon-dong commented Aug 26, 2024

I had the same problem with live-server.
When I turned on live-server by pressing the Go Live button and modified index.html and saved it, an error message saying "live reload is not possible without a head or body tag" appeared and the Chrome browser turned white.
I thought it was because I didn't turn on live-server in the direct folder,
I was right!

I'll attach a screenshot of the folder structure.
Please try opening the folder that contains the index.html file in vscode!

Good Case

image

Bad Case

image

Additionally, this error appears to appear if you turn on the live server on a drive other than the primary drive, such as the D drive instead of the C drive!

Move the file and give it a try!

@martigej
Copy link

This bug was not fixed yet?
I have the warning "Live Reload is not possible as body or head tag or defined tag is missing in HTML" if in my I have included JQuery:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Removing this line the warning do not appear anymmore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests