-
Notifications
You must be signed in to change notification settings - Fork 46.2k
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.
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
"Unable to find element with ID" when re-rendering server generated content that contains a style tag #7093
Comments
@andersekdahl |
Can you clarify what you mean by this? Are you conditionally rendering the style element or something? |
We render HTML that we get as a JSON structure from the server. Some of that can contain style elements (it's from a CMS and some editors gets creative). When navigating we don't reload the page, just render the new content which could be new content that doesn't include style elements. |
Unless it has changed (since last I was involved) then Perhaps this is something that should be made nicer, but |
Simple jsfiddle to reproduce https://jsfiddle.net/muzqojcg/1/ |
@syranide To be clear, your fiddle is just demonstrating that the nodes Your fiddle does not appear to trigger the invariant violation mentioned in the bug report, right? At least, I don't get an invariant on my machine. I've tested in Chrome and Firefox. We still don't have a repro of the invariant violation, right? |
@jimfb It was meant to showcase that it outputs the following: <style data-reactroot="">
<!-- react-text: 2 -->a<!-- /react-text -->
<!-- react-text: 3 -->b<!-- /react-text -->
</style> The comments should not be there, text is the only valid content of a style-tag, just like script-tags. You can't actually get it to throw an invariant violation due the new renderer (AFAIK), but if you resume from SSR and update the contents of the style-tag then you will get it. Note that they are actually nodes too (if you inspect), not text content. This is wrong, to illustrate: d = document.createElement('div');
d.innerHTML = '<style data-reactroot=""><!-- react-text: 2 -->a<!-- /react-text --><!-- react-text: 4 -->y<!-- /react-text --></style>';
d; Outputs a style-tag with a single text child, no actual comment nodes (this is what happens when you use SSR, hence the invariant violation when trying to update it). So, style-tags much like script-tags may only be updated with |
If |
@andersekdahl I am getting the same error when I do server side rendering with redux-conect. But I don't have anything like Related issue I opened at redux-connect: makeomatic/redux-connect#36. It only happens when one of the props updates, causing the component to be re-rendered after having been rendered on the server. Using React 15.1.0. Edit After investigating, I found I wonder why this happens and what can be done to fix it. A solution is to render Twitter button only on the client side but that causes checksum mismatch between client and server. |
I am facing same issue. I dont have any Style tag in my code, but my external CSS uses pseudo class. Therefore, :before :after are coming as DOM Nodes and invariant violation is being thrown. HOW TO SOLVE THIS ? |
Having a similar problem here. How can we deal with this kind of issues or third party libraries? |
I experienced this problem with a more simple use case: It seems way too strict in my opinion. Also, I am not even sure what I am getting out of it, as I noticed that text selections are not persisting through the render, indicating to me that it is not properly reusing the elements anyways. You can use renderToStaticMarkup to work around this issue. It is said to be less efficient, but with neither preserving text selections, I am not so sure. With renderToStaticMarkup, you will certainly have less bytes to transfer. |
For me this issue is caused by Facebook sharing button. I've fixed it with adding a condition to JSX to render it only on client side:
|
I am getting this error intermittently. Often it throws the first time I load a page. When I reload the page I do not see the error again, that's not much to go on though... UPDATE: My issue was because I was missing the |
@andersekdahl I am no longer having this issue with Twitter follow button using React 15.4.1. I also tried to reproduce it on https://github.com/sungwoncho/react-ssr-style-bug without success. I think we can close this. |
I had this issue because I left out
PS: Today I had this issue again because I indirectly nested a If I move
|
I solved my problem with style inline with |
I had this problem, in my case caused by nested anchor tags, which are invalid. Many of these problems can be solved by checking for invalid markup and fixing that. |
the same issue raises as I wanted to embed Facebook video in my site (localhost), but I do not know if I do it the right way in react. In my header component I put this:
and the code for html of the video in one of the routes. Thank you |
For me, this error was caused by Cloudflare's HTML minification. Problem documentation and problem solution. |
@chadoh thanks man! you saved my day! |
@chadoh 謝謝,我的網站開不起來就是因為這個原因 👍 |
in my case , i used html p (p in p) tag nested and in webpack dev server works without error , when i build |
Whatever the cause was, this error can't possibly happen in React 16 because that code was rewritten. We also don't use comment nodes now. So I'm closing this. If you still experience a similar error after upgrading to 16 (perhaps with a different message) please file a new issue with a reproducing example. |
In our case(React 15.3.0), this is caused by invalid html markup, such as |
Ran into this with Optimizely rewriting a headline element on a specific page at a very bad time. Imagine you could potentially run into this with any similar services that are rewriting content on the page after load. |
react 15.6 with SSR, met this problem with unstructured HTML
after warping value2 with
Errors 🐛gone |
Do you want to request a feature or report a bug?
This is a bug.
What is the current behavior?
![capture](https://cloud.githubusercontent.com/assets/163637/16224243/7a09a39a-37a1-11e6-849b-e6aa70e709f3.PNG)
We server-render a page that has a style tag and the style tag is created using
React.createElement
. When that later gets re-rendered without astyle
element we see an error in the console:Note that this only happens when we server-render that page. If we turn off server rendering the error goes away. The DOM looks like this:
The error also goes away if we do:
Instead of:
And it also goes away if we do:
So it seems that the
style
element expects only one child.If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/reactjs/69z2wepo/).
I haven't been able to create a small reproducable, but I hope that I've narrowed it down enough to be clear. If not then tell me and I'll try to create a reproducable again.
Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
15.1.0
The text was updated successfully, but these errors were encountered: