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.

🙋 HTML parsing too strict?

See original GitHub issue

🙋 Feature Request

🎛 Configuration (.babelrc, package.json, cli command)

{
  "your": { "config": "just using the default out of the box..." }
}

🤔 Expected Behavior

This is the html source and what I was expecting to be output.

    <div id="visual">
        <div id="jet-icon" />
        <div id="runway-icon" />
    </div>

😯 Current Behavior

This is the output which is nested differently by the browser.

<div id="visual">
    <div id="jet-icon">
        <div id="runway-icon">
    </div>

Issue Analytics

State:
Created 6 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

shawwncommented, Dec 30, 2017

In situations like this, it’s best to use curl rather than looking at the browser’s DOM:

$ curl localhost:1234
    <div id="visual">
        <div id="jet-icon" />
        <div id="runway-icon" />
    </div>

So, parcel doesn’t actually transform the HTML at all – it just passes the HTML straight to the browser.

I experimented with setting different doctypes (html4, xhtml1.0, xhtml1.1) but it seemed to make no difference: chrome simply doesn’t support self-closing div tags.

It’s tempting to say that parcel should just fix the problem (by turning <div /> into <div></div> automatically), but that’s probably a bad idea. There are cases where a user wants to generate invalid HTML, e.g. unit testing.

Vue.js deals with similar issues. If you try to write <table><my-component></table>, the browser automatically inserts <table><tbody><my-component></tbody></table>, which screws up Vue’s virtual rendering.

We should probably follow Vue’s lead and simply leave the HTML untouched.

edit: fixed formatting.

0reactions

ubershmekelcommented, Dec 31, 2017

@shawwn I’m explaining that I did curl and still do see parcel serving the <div> instead of the <div/>.

If you’re not seeing removed slashes it might be because you don’t have a <link rel="stylesheet" type="text/css" href="./index.css" /> in your <head> which I only now discovered is required to get parcel to remove the slashes.