Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<!DOCTYPE html> broke render

See original GitHub issue

HTM is a very cool library, thanks a lot to everyone who took part in the development, I really love it! I found one whole curious bug the reason of which I do not yet understand. the following code will produce incorrect output:

const htm = require('htm');
const vhtml = require('vhtml');
const html = htm.bind(vhtml);

console.log( html`
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    
  </body>
  </html>
` );

Nothing special, just emmet generated boilerplate ( ! + tab ). (this tool is actively used in front-end development and is built into some IDE by default) Output of this code:

[ 'meta',
  { charset: 'UTF-8' },
  '<meta name="viewport" content="width=device-width, initial-scale=1.0">' ]

Interactive repl

Any ideas how to fix this?

Issue Analytics

State:
Created 4 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

developitcommented, Oct 16, 2019

HTM is intentionally not a full HTML parser. It can handle arbitrary Element and Comment nodes, but does not support other tag types like Doctype or Processing Instruction.

For this specific case, I’d recommend prepending the doctype as a string:

http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    response.write('<!DOCTYPE html>' + html`
  <html lang="en" >
  <head>
    <title>etc</title>
  </head>
  <body>
    etc
  </body>
  </html>
` );  
    response.end();  
}).listen(8000);

2reactions

goranmoomincommented, Oct 10, 2019

@Akiyamka I’m not sure, but I think htm is specially targeted to JSX (with some HTML extensions), so it’s not surprising that htm doesn’t support DOCTYPE tags.

You shouldn’t be doing that anyway, I can’t think of any use case of using htm for a total HTML document. Most likely you should already have the DOCTYPE and head tags when the JS code has loaded.