Isomorphic Rendering with inserted html broken. (15.0) #6452

DylanPiercey · 2016-04-08T02:58:06Z

In React 0.14x and below inserted dom nodes inserted by plugins such as adblock, browser sync, or otherwise were ignored.

Now in React 15 these new nodes cause the

index.js:65 Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:

I'd say this is a regression since it breaks (full page) isomorphic rendering for anyone using plugins (or scripts) that insert dom when loaded.

I'd say react should just ignore anything without a "data-reactid" when mounting server rendered code.

Edit:

On top of this React now throws in this case, where as before it would gracefully continue.

zpao · 2016-04-08T06:24:58Z

What does the rest of that warning say?

buzinas · 2016-04-08T06:35:54Z

@zpao I'm having problems with server side rendering also.

When using 15.0.0-rc.2, everything was working smooth, but after update, I'm receiving this message:

{"error":"React.__spread is not a function"}

Tried to reinstall all my dependencies and the error persists. Tried to install the previous version (RC2), and it started working again, smoothly.

petetnt · 2016-04-08T06:41:39Z

@buzinas See #6444

zpao · 2016-04-11T21:54:17Z

I'm pretty sure this is just the same as #6451 so I'm going to close this out. Let me know if I'm incorrect in that assumption.

DylanPiercey · 2016-04-12T01:53:59Z

@zpao this is unrelated to #6451. Here is the full stack trace:

index.js:65 Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:
 (client)  data-reactid="13"></head><body data-rea
 (server)  data-reactid="13"><style type="text/css
    at invariant (http://efca.localhost.ca:3002/admin/js/app.js:34199:15)
    at Object.ReactMount._mountImageIntoNode (http://efca.localhost.ca:3002/admin/js/app.js:83566:91)
    at Object.wrapper [as _mountImageIntoNode] (http://efca.localhost.ca:3002/admin/js/app.js:84437:21)
    at mountComponentIntoNode (http://efca.localhost.ca:3002/admin/js/app.js:83225:14)
    at ReactReconcileTransaction.Mixin.perform (http://efca.localhost.ca:3002/admin/js/app.js:87875:20)
    at batchedMountComponentIntoNode (http://efca.localhost.ca:3002/admin/js/app.js:83239:15)
    at ReactDefaultBatchingStrategyTransaction.Mixin.perform (http://efca.localhost.ca:3002/admin/js/app.js:87875:20)
    at Object.ReactDefaultBatchingStrategy.batchedUpdates (http://efca.localhost.ca:3002/admin/js/app.js:81259:19)
    at Object.batchedUpdates (http://efca.localhost.ca:3002/admin/js/app.js:85595:20)
    at Object.ReactMount._renderNewRootComponent (http://efca.localhost.ca:3002/admin/js/app.js:83392:18)

The issue is to due with nodes (in this case a <style> tag used by an adblocker) being inserted into the document before react loads breaking the checksum. In the past react would just ignore things like this.

This works in 15.0.0-rc.1 and below.

Ideally react would ignore anything without a data-reactid when validating the checksum if possible, i'm not sure how it worked before.

zpao · 2016-04-12T20:34:00Z

@spicyj How has the checksum check changed now that we're using createElement? Before it would work in this case because we'd be looking at the checksum of the generated markup string which wouldn't have seen the actual DOM. Or is this actually a case where the warning uses outerHTML so this mismatch is just pointing at the wrong thing.

chandlerprall · 2016-04-13T19:13:59Z

In my application we have a chunk of code that is executed when the window object exists which builds a new stylesheet and appends it to head. Experienced identical error as @DylanPiercey, and I ended up solving during my upgrade to React 15 by building up the stylesheet object as part of a state and injecting it at component render. The error message looks correct to me.

Interestingly this was a race condition as sometimes React's initial render would happen before the additional stylesheet was injected, and all would be fine.

sophiebits · 2016-04-13T20:33:35Z

@zpao Nothing's changed – we still generate HTML client-side when reviving server-rendered markup.

sophiebits · 2016-05-05T20:21:05Z

@DylanPiercey The checksum still would not be thrown off by anything added by an adblocker like this (and should work identically to 0.14.7). The error message is misleading in this case though. If you disable your adblocker, what error do you get instead?

sophiebits · 2016-05-06T01:01:36Z

Going to close this because it's unlikely this is actually a React bug but please reply and we can continue to debug.

DylanPiercey · 2016-05-06T01:18:12Z

@spicyj Sorry for not replying quicker. I tried 0.15x on a couple other projects with similar setups and it works fine so this must be something specific to the project. This can stay closed, thanks.

sophiebits · 2016-05-06T02:17:36Z

No worries, I just wanted to clarify my earlier comments. Didn't mean to put any pressure on you to reply quickly! If you have more trouble with that project then feel free to post and we'll figure out what's going on.

manughuman · 2017-11-06T17:12:49Z

@DylanPiercey - Were you able to solve this issue. if yes can you share some pointers.. I am facing the similar issue on upgrading react from 0.14x to 15 ..

invariant.js:42 Uncaught Error: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:
(client) 27"><a href="Mongo" data-reactid="28"><h
(server) 27"><a href="Mongo" class="activeNav" da
    at invariant (invariant.js:42)
    at Object._mountImageIntoNode (ReactMount.js:502)
    at mountComponentIntoNode (ReactMount.js:110)
    at ReactReconcileTransaction.perform (Transaction.js:141)
    at batchedMountComponentIntoNode (ReactMount.js:124)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:141)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:60)
    at Object.batchedUpdates (ReactUpdates.js:95)
    at Object._renderNewRootComponent (ReactMount.js:317)
    at Object._renderSubtreeIntoContainer (ReactMount.js:399)

DylanPiercey · 2017-11-09T15:40:30Z

@mgmn ultimately we made 100% sure that the server rendered output was the same (this was tricky for some dates for unknown users). There was also setup a way to catch the error and discard the dom if needed.

My larger problem and the reason I created this issue was that react was broken for people who used browser extensions in some cases but I believe that was fixed when they removed data-reactid.

Sorry if that doesn’t help any. This issue is also pretty old so perhaps it was fixed in react 16.

DylanPiercey changed the title ~~Isomorphic Rendering with inserted html.~~ Isomorphic Rendering with inserted html broken. (15.0) Apr 8, 2016

zpao closed this as completed Apr 11, 2016

gaearon reopened this Apr 12, 2016

sophiebits mentioned this issue May 6, 2016

Validate server markup against the DOM rather than string checksum #6618

Closed

sophiebits closed this as completed May 6, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Isomorphic Rendering with inserted html broken. (15.0) #6452

Isomorphic Rendering with inserted html broken. (15.0) #6452

DylanPiercey commented Apr 8, 2016

zpao commented Apr 8, 2016

buzinas commented Apr 8, 2016

petetnt commented Apr 8, 2016

zpao commented Apr 11, 2016

DylanPiercey commented Apr 12, 2016

zpao commented Apr 12, 2016

chandlerprall commented Apr 13, 2016

sophiebits commented Apr 13, 2016

sophiebits commented May 5, 2016

sophiebits commented May 6, 2016

DylanPiercey commented May 6, 2016

sophiebits commented May 6, 2016

manughuman commented Nov 6, 2017 •

edited

Loading

DylanPiercey commented Nov 9, 2017 •

edited

Loading

Isomorphic Rendering with inserted html broken. (15.0) #6452

Isomorphic Rendering with inserted html broken. (15.0) #6452

Comments

DylanPiercey commented Apr 8, 2016

zpao commented Apr 8, 2016

buzinas commented Apr 8, 2016

petetnt commented Apr 8, 2016

zpao commented Apr 11, 2016

DylanPiercey commented Apr 12, 2016

zpao commented Apr 12, 2016

chandlerprall commented Apr 13, 2016

sophiebits commented Apr 13, 2016

sophiebits commented May 5, 2016

sophiebits commented May 6, 2016

DylanPiercey commented May 6, 2016

sophiebits commented May 6, 2016

manughuman commented Nov 6, 2017 • edited Loading

DylanPiercey commented Nov 9, 2017 • edited Loading

manughuman commented Nov 6, 2017 •

edited

Loading

DylanPiercey commented Nov 9, 2017 •

edited

Loading