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.

Uncaught DOMException when having `<!DOCTYPE html>` and setting the `parentDom` to `document` when rendering

See original GitHub issue

Check if updating to the latest Preact version resolves the issue

Describe the bug If we have <!DOCTYPE html> in our HTML document where we use Preact, and try to render or hydrate a component in the document, we get an Uncaught DOMException error, and the component does not render/hydrate. Although, it’ll be fine if we remove <!DOCTYPE html>. This is very a strange behavior.

To Reproduce

<!DOCTYPE html>
<html>
  <body>
  </body>
</html>
<script type="module">
  import { h, Component, render } from 'https://unpkg.com/preact?module';

  const app = h('html', null, h('body', null, h('h1', null, 'Hello World!')));

  render(app, document);
</script>

Steps to reproduce the behavior:

Open the above HTML in your browser.
You will face the error.
Try removing the first line, <!DOCTYPE html>.
See how the error is gone.

Expected behavior Should act just fine 😃

Issue Analytics

State:
Created 10 months ago
Comments:12 (5 by maintainers)

Top GitHub Comments

1reaction

developitcommented, Dec 2, 2022

Shouldn’t this be rendering into document.documentElement?

I’d like to support this in Preact, since Remix is already relying on it.

1reaction

marvinhagemeistercommented, Nov 14, 2022

Everything does that nowadays.

That doesn’t match my experience, but I’m curious to learn more. Can you share some links to projects which do that in the way you’re describing?

Top Results From Across the Web

Rendering raw Html sources in React using doesn't show the ...

The problem, the body style of the Html sources doesn't show as we expected. For example: let's say we have this; <!DOCTYPE html> ......

Issues · preactjs/preact - GitHub

Uncaught DOMException when having <!DOCTYPE html> and setting the parentDom to document when rendering 11.x compat enhancement known issue The issue is ...

Fix Your Site With the Right DOCTYPE! - A List Apart

Since the tag provides a valid location on the web, the browser knows where to find it, and will render your document in...

Node.removeChild() - Web APIs - MDN Web Docs

To remove a specified element without having to specify its parent node: let node = document.getElementById("nested"); if (node.

HTML Document Type <!DOCTYPE html> Declaration

Placing a doctype at the beginning of a webpage can prevent weird display issues and help with rendering consistency across browser.