Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server Rendering SVG foreignObject body tag w 15rc2 results in missing ID error #6280

Closed
toddgeist opened this issue Mar 17, 2016 · 8 comments · Fixed by #6469
Closed

Server Rendering SVG foreignObject body tag w 15rc2 results in missing ID error #6280

toddgeist opened this issue Mar 17, 2016 · 8 comments · Fixed by #6469
Labels
Difficulty: starter SVG

Comments

@toddgeist
Copy link

(I am using 15rc2 because I need all the svg tags)

I am rendering a foreignObject svg tag. According to MDN I put body tag inside that tag and then whatever html I want in there.

<foreignObject>
  <body xmlns="http://www.w3.org/1999/xhtml">
   <!-- whatever html I want -->
  </body>
</foreignObject>

renderToString on the server leaves the body tag in place, and gives it a react-dataid. However when rendered on the client that body tag is removed. So when I look at the live elements, the body inside foreignObjects is gone, along with it's data-reactid. The server source ( ie view page source ) shows that the body tag was rendered with the missing react-dataid.

The result is that you get a “Invariant Violation: Unable to find element with ID XX”, when the page updates, and somethings don't work.

Removing the body from inside the foreignObject tag seems to solve the problem,

<foreignObject>
   <!-- whatever html I want -->
</foreignObject>

but I don't know if that is an "OK" solution to this or if that body tag is necessary in some scenarios. But in either case this seems to be a scenario where server rendering results in different DOM/HTML then client rendering.

Is this a problem, or is the body tag not supposed to there anyway?

Todd
@toddgeist toddgeist changed the title Server Rendering SVG foreignObject body tag w 15rc2 result in missing ID error Server Rendering SVG foreignObject body tag w 15rc2 results in missing ID error Mar 17, 2016
@jimfb
Copy link
Contributor

jimfb commented Mar 17, 2016

We never render the data-reactid on the client side - only on the server side. Can you provide a jsfiddle that demonstrates the invariant violation?

@zpao
Copy link
Member

zpao commented Mar 17, 2016

Thanks for tracking down more specifically. Could be that browsers don't actually support that body usage? Or when actually parsed from markup, the body node doesn't exist (which seems likely and matches up with what we see in other situations where the browser changes markup). I won't have a chance to look into this more for a few days - it might be best to just use your alternate approach for now.

@toddgeist
Copy link
Author

I can remove the body tag. It seems to work ok with out it.

Whats clear at this point is that if the server sends the body tag, it is not parsed into a DOM node, at least on mac with Chrome and Safari. That results in the error, since the data-reactid for the body is missing.

IE doesn't support foreignObject so its not relevant there. MS Edge does, but I haven't tested it.

@gaearon
Copy link
Collaborator

gaearon commented Mar 17, 2016

Or when actually parsed from markup, the body node doesn't exist (which seems likely and matches up with what we see in other situations where the browser changes markup).

It seems so. Even without React, I can’t get Chrome (or Firefox for that matter) to make body an actual node:

screen shot 2016-03-17 at 15 19 30

http://jsbin.com/qelademodi/1/edit#file

@jimfb
Copy link
Contributor

jimfb commented Mar 17, 2016

@gaearon FWIW, ReactDOM.render() does manage to put one in: http://jsfiddle.net/j5hh76h2/

@gaearon gaearon added the SVG label Mar 17, 2016
@sophiebits
Copy link
Collaborator

Sounds like we should add this to validateDOMNesting: we should warn and tell you you can't put a body tag inside foreignObject. We don't do anything much for SVG there right now; probably the ideal solution would be to pass the namespace info down too, then we can distinguish SVG and HTML tags with the same name (like title), then make sure the contents of a foreignObject SVG tag are appropriate HTML tags.

Not sure which HTML tags are and aren't allowed but it might be detailed in the HTML5 spec at https://html.spec.whatwg.org/multipage/.

@keyz
Copy link
Contributor

keyz commented Apr 9, 2016

Can I take this one? @toddgeist

@toddgeist
Copy link
Author

@keyanzhang please do :-)

@keyz keyz mentioned this issue Apr 9, 2016
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Difficulty: starter SVG
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Ensure validateDOMNesting catches nested body elements keyz/react
6 participants
@sophiebits @zpao @toddgeist @gaearon @keyz @jimfb