Select doesn't render isomorphically

[timothyhague]

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?

[jonjaques]

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]

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?

[JevinAnderson]

Duplicate of #1104. #1105 should resolve.

[mattbroekhuis]

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

[Peterabsolon]

I'm getting the same error as @mattbroekhuis

[Ynote]

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).

[Peterabsolon]

Interestingly I'm only getting this error in development, with transpiled production version of the code the error is not there

[bmamouri]

@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.

[mattbroekhuis]

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.

[jackcallister]

Set the instanceId: <Select instanceId='noIdeaWhyThisIsNecessary' ...>

[bmamouri]

@jarsbe that doesn't solve the problem for me.

[Jaikant]

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

[fiatjaf]

See also #1297

[davegomez]

Is there any intention to address this issue in the future?

[idangozlan]

Use instanceId:
<Select instanceId="unique name" ...>

[davegomez]

It works! This should be in the documentation.

[Torone]

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;}</style><input role="combobox" aria
(server) one;}</style><input aria-haspopup="false

Any update, news, something, to solve this quickly?

[bradchristensen]

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.