[Popover] Invariant Violation: findComponentRoot(...) from unclosed <noscript>

[echenley]

I have a universal app with HMR in development. I noticed something very strange when using an <IconMenu />.

My code:

<IconMenu
  iconButtonElement={ <IconButton><MoreVertIcon color="#fff" /></IconButton> }
  targetOrigin={ { horizontal: 'right', vertical: 'top' } }
  anchorOrigin={ { horizontal: 'right', vertical: 'top' } }
>
  <MenuItem
    primaryText="Logout"
    onClick={ () => actions.logout() }
  />
</IconMenu>

The rendered HTML:

If you look at the highlighted part, there is an extra, unclosed <noscript> in there. I believe this is what's causing issues.

Edit:
Looks like it's coming from the react-event-listener library: https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L384

@oliviertassinari

Versions

Material UI Version: 0.15.0-alpha.1
React: 0.14.7
Browser: Chrome

[vasyas]

Spotted the same issue with DropDownMenu

[oliviertassinari]

@echenley I don't manage to reproduce this issue. Can you help me?

[echenley]

@oliviertassinari It looks like this might be a bug in React. It doesn't properly handle nested <noscript /> tags.

If you inspect the source here, you'll see the same thing: http://codepen.io/anon/pen/BKjVpZ

I'm not sure if that's intentional. In the meantime you might have to use an empty <div /> instead of <noscript /> here? https://github.com/callemall/material-ui/blob/master/src/popover/popover.jsx#L383

[oliviertassinari]

I'm not sure if that's intentional. In the meantime you might have to use an empty <div /> instead of <noscript /> here?

That sounds like a reasonable fix. Do you want to submit a PR?
I think that it's no longer an issue with React 15.0.0.

[stueynet]

Testes with react 15.0.0-alpha.1 and it still happens

[echenley]

@oliviertassinari Yes, working on a PR!

[mbrookes]

@echenley

I believe this is what's causing issues.

What issues specifically?

The fix broke nested menus: #3802

[echenley]

@mbrookes In React 0.14, nested <noscript> tags render invalid HTML, which caused invariant violations when hot-reloading. Check out this issue: facebook/react#6204. It is apparently fixed in React 15.

[mbrookes]

Odd - I'm not getting any invariant violation here when I revert the change in #3647 (React 0.14.7).

But I don't understand the use of <noscript> here in the first place TBH.

[echenley]

It looks like react-event-listener isn't used in too many places. Could it be re-implemented as a higher order component in such a way that the <noscript> wrapper isn't necessary? @oliviertassinari

[oliviertassinari]

I could re-implement react-event-listener as a HoC but I don't see how this would help with this issue.
<RenderToLayer /> is also returning null in the render method.

[echenley]

The <noscript /> wrapper in Popover is only necessary because there's two children. If react-event-listener were an HoC, there would only be a single child and no need for the explicit <noscript> wrapper.

[mbrookes]

Sure, but why <noscript>?

[echenley]

I'm not entirely sure, but React renders <noscript> when a render function returns null. I'd imagine since both <EventListener /> and <RenderToLayer /> render null, that's why it was chosen? If it weren't for the bug in React 0.14, it would be working fine if I'm not mistaken.

[mbrookes]

Maybe. Anyway, rather than revert to <noscript> now that react-event-listener appears to be fixed, I'll just make the <div>: <div style={{display: 'none'}}> instead.