React-select: Select doesn't render isomorphically
Hello,
If I render this server side first, and then attach client side, like is done here:
https://github.com/mhart/react-server-example
You get a checksum error:
warning.js:44 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) r" id="react-select-2--value" data-react
(server) r" id="react-select-4--value" data-react
I think it is to do with the way the instancePrefix is being generated here:
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L155
Could an option be added to set the instance id so it works isomophically?
timothyhague
All 18 comments
Also want to point out that the react-select-$n value increments with every reload, so leads me to believe some sort of state is being persisted.
jonjaques
on 27 Jul 2016
https://github.com/JedWatson/react-select/blob/master/src/Select.js#L25
This var gets persisted statically as the application is running on the server, which is no good - as it should be reinitialized with every request.
Could this simply be changed to an instance variable?
jonjaques
on 27 Jul 2016
Duplicate of #1104. #1105 should resolve.
JevinAnderson
on 28 Jul 2016
I'm still getting this on "react-select": "^1.0.0-rc.2",
What am i missing?
warning.js:36Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) r" id="react-select-2--value" data-react
(server) r" id="react-select-7--value" data-react
mattbroekhuis
on 29 Sep 2016
I'm getting the same error as @mattbroekhuis
Peterabsolon
on 3 Oct 2016
Hi,
Sorry to post on a closed issue but I still have the same issue (like @Peterabsolon and @mattbroekhuis). The fix on the instance variable doesn't seem to be enough.I'm on react-select": "^1.0.0-rc.1".
Is it possible that the runtime used for server-side rendering could affect the persistance? I am using v8 3.16.14.15 (through the therubyracer gem).
Ynote
on 4 Oct 2016
Interestingly I'm only getting this error in development, with transpiled production version of the code the error is not there
Peterabsolon
on 4 Oct 2016
@mattbroekhuis I am getting the exact same error. Did you manage to solve it?
@Peterabsolon You don't get the error in production because React shows warnings only when NODE_ENV is set to development.
bmamouri
on 17 Oct 2016
I did not. Ended up removing the lib and solving it a different way. It just kept cropping up randomly and I was spending too much time on it.
On Oct 17, 2016, at 5:12 AM, Baqer Mamouri [email protected] wrote:
@mattbroekhuis I am getting the exact same error. Did you manage to solve it?
@Peterabsolon You don't get the error in production because React shows warnings only when NODE_ENV is set to development.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
mattbroekhuis
on 17 Oct 2016
Set the instanceId: <Select instanceId='noIdeaWhyThisIsNecessary' ...>
jarsbe
on 3 Nov 2016
@jarsbe that doesn't solve the problem for me.
bmamouri
on 4 Nov 2016
I am seeing this error too.
warning.js:36 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) r" id="react-select-2--value" data-react
(server) r" id="react-select-3--value" data-react
Jaikant
on 5 Dec 2016
fiatjaf
on 22 Dec 2016
Is there any intention to address this issue in the future?
davegomez
on 17 May 2017
Use instanceId:
idangozlan
on 18 May 2017
It works! This should be in the documentation.
davegomez
on 18 May 2017
Just installed the version: 1.0.0-rc.2
I receive 2 warnings and an error:
Warnings:
Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead...
Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead...
Error:
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
(client) one;} (server) one;}Torone on 12 Oct 2017
Both of those warnings are fixed in the latest version (1.0.0-rc.10 if I recall correctly). I'm not sure off hand about the error but I don't think I've experienced that problem.
Like @idangozlan mentioned, you should set the instanceId prop to some unique value that is consistent between server and client renders. In my experience, that is all that is required to fix the problem described by this thread. If you're still experiencing that error after setting the instanceId while using the latest version of the library then it'd be worth investigating further.
bradchristensen
on 12 Oct 2017
Related issues
joshualimpj
·
3Comments
batusai513
·
3Comments
yrabinov
·
3Comments
juliensnz
·
3Comments
Meesam
·
3Comments
Most helpful comment
Use
instanceId: