question-mark
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.

Better detection of poorly formed JSX (HTML)

See original GitHub issue

Not sure what to do yet but would be great if we could validate templates in a way that we ensure the browser won’t mess with them when we instantiate them. Things like how browsers insert <tbody> if you omit it. Or the way certain elements aren’t allowed certain children. This is critical because it breaks walks during render/hydration.

Right now I just count the tags at runtime which is super rudimentary and it only runs in dev mode since we don’t want the additional code/overhead. In theory this can be done at compile time but I don’t know of any existing packages. Maybe failing that we could just develop something ourselves?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:13 (13 by maintainers)

github_iconTop GitHub Comments

1reaction
ryansolidcommented, May 19, 2022

This is ok at least from our perspective. The only thing getting force fixed by the browser are the templates I think. Maybe there are exceptions still. But like the <tbody> doesn’t happen if you just append a <tr>.

Read more comments on GitHub >

github_iconTop Results From Across the Web

JSX or HTML autocompletion in Visual Studio Code
On bottom of VSCode where detect language click on that. 1st step. Click on "Configure 'Javascript(Babel)' language based settings..." or what ever. 2st...
Read more >
Optimizing Performance - React
If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build. By default, React...
Read more >
How to Secure Your React.js Application - freeCodeCamp
2. Make sure that the HTML code is resilient · A. Disable HTML markups · B. Use escape characters · C. Utilize dangerouslySetInnerHTML...
Read more >
What every front-end developer should know about change ...
What every front-end developer should know about change detection in Angular and React. Dive into change detection by learning the problems it solves...
Read more >
jsx-eslint/eslint-plugin-react: React-specific linting rules for ...
It will default to "latest" and warn if missing, and to "detect" in the future ... This plugin exports a recommended configuration that...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found