search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
127.53k stars 27.05k forks source link

Invalid HTML inside `dangerouslySetInnerHTML` breaks the page. #14797

Open lfades opened 4 years ago

lfades commented 4 years ago

Bug report

Describe the bug

If invalid HTML is added to dangerouslySetInnerHTML, Next.js will output a blank page without providing any feedback. This can be hard to track when working with a CMS provider or markdown files.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Clone https://github.com/lfades/nextjs-inner-html-bug
  2. Run yarn && yarn dev or npm i && npm run dev
  3. See that pages/index.js is a blank page with no errors

Expected behavior

Invalid HTML inside dangerouslySetInnerHTML should throw and/or let the user know that there's something wrong.

The demo also has an index.html and index.js in the root directory that shows how the same code works in React alone, it doesn't produce an error either, but it shows the content.

TatisLois commented 4 years ago

Hey @lfades is it okay if I take this issue up?

I was able to reproduce the issue locally and noticed that the reason the page goes blank is because dangerouslySetInnerHTML seems to be auto closing the open tag while wrapping any HTML/Scripts etc.. underneath inside of the tag.

This does not cause the page to go blank if that invalid html tag is a or even invalid markup like but will go blank if the invalid html tag is a