Warning: React attempted to reuse markup in a container but the checksum was invalid.

[bolicd]

Hi,

not sure whats happening, if im doing something wrong here but 2 things i've noticed when trying to use this boilerplate on Windows 10 machine:

1. Clone this repo, yarn install, yarn start - works.However, any change to any component results in : Warning: React attempted to reuse markup in a container but the checksum was invalid. For example trying to change Intro.js title.

2. Build script for components are not working it seems. Getting Error: Command failed: mkdir -p errors

Am I missing something here?

Thanks

[mz026]

Hi @bolicd ,

For 1, may I have the route/url when you encountered this issue?
For 2, is it test-prebuild command? (yarn test:prebuild)

[bolicd]

Hi

1. Route was: http://localhost:3000/
   I've only changed Intro Page title to Intro Page2 and done yarn start. Errors in console are:
   warning.js?8a56:36 Warning: React attempted to reuse markup in a container but the checksum was invalid.

GET http://localhost:3000/76d2c183740ddb85f14e.hot-update.json 404 (Not Found)
process-update.js?e13e:37 [HMR] Cannot find update (Full reload needed)
[HMR] (Probably because of restarting the server)

2. Im using git bash, and I was typing script for generating new component as described in main readme file:

$ ./bin/generate component myNamespace/MyComponent

[mz026]

Hi @bolicd ,

For the generator part, I update the code in this commit to create directories by node-mkdirp. Can you please fetch the latest master branch to see if the issue persists? (Sorry I don't have a windows machine to test that 😛 )

For the invalid checksum one, I can't reproduce it on my end.
The warning message indicated that the HTML provided by server rendering didn't match the one browser tried to render in the initial rendering. Did you see something like

(client): ...
(server): ...

appended after the invalid checksum warning message on your console?

[bolicd]

Hi,

will fetch and check generator part thanks.

For invalid checksum here is more information, it may be related to the node version or something:
node v: 6.9.1
npm v: 3.10.8
yarn: 0.24.6
git win version: git version 2.11.0.windows.1
I only changed one file: containers/Intro.js line: 13 from:
<h1>Intro Page</h1>
to
<h1>Intro Pagexxx</h1>

Console loads changed concent from server and then renders original content from the client(!?) showing the 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) actid="5">Intro Page</h1><div data-react (server) actid="5">Intro Pagexxx</h1><div data-re

Additional console log errors
process-update.js?e13e:37 [HMR] Cannot find update (Full reload needed) cb @ process-update.js?e13e:37 (anonymous) @ process-update.js?e13e:68 process-update.js?e13e:38 [HMR] (Probably because of restarting the server)

I've sucessfully used this template in my previous project, without any issues, altho I was working on Mac, so im not sure if this is related to the Windows or not. I think theres some issue with webpack or server side rendering here.

Thanks

[mz026]

Hi @bolicd ,

For the checksum issue, looks like the client code didn't catch the update from Page to Pagexxx.

Can you check are there any js files in your dist folder? If there are, please remove them any try again.

I updated the webpack building process a couple days ago, from webpack-dev-server to its middleware. The js files in dist folder is the result of the older version, which will not appear under the new version. But if you have run the old version (so that there're some js files built into dist) you have to remove them manually.

[bolicd]

Hi,

i've deleted /dist folder completely. Now everything seems to be working without an issue.Will pull master and test script for generating component later.

Thanks

[bolicd]

Hi,

I've tried new master branch. Deleting /dist folder seems to be working so far(without it, i get checksum warning but page still renders ok).

However, scripts are still not functional. Here is the output:

$ ./bin/generate component testComponent/testComponent
mkdir...
copy files...
sed...
C:\repos\universal-redux-template\bin_generate.js:143
throw new Error('unknown os type ' + osType);
^

Error: unknown os type windows_nt
at getSedCommand (C:/repos/universal-redux-template/bin/_generate.js:92:11)
at sed (C:/repos/universal-redux-template/bin/_generate.js:72:20)
at Object. (C:/repos/universal-redux-template/bin/_generate.js:11:1)
at Module._compile (module.js:570:32)
at loader (C:\repos\universal-redux-template\node_modules\babel-register\lib\node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (C:\repos\universal-redux-template\node_modules\babel-register\lib\node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)

[mz026]

I think it's because I used sed command which only works on *nix os. I guess shelljs can solve this issue, will add it later.

[aleksandar-b]

Having this issue also.
Created new component and placed it intstead of intro component in router.
warning.js?8a56: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:

[mz026]

hi @sabervision ,
can you check is there any js file in your dist folder? If there are, please remove them any try again.

[aleksandar-b]

I deleted dist folder completely and now it is working.
I don't know will there be any side effects?
Did not try to delete js files, though.

[mz026]

HI @sabervision ,

Good to know it works!
There should not be any side effect for deleting files in dist folder, it's used for production build.
The current config of static settings on Express side can be further improved to eliminate such kind of issue.

[shahidarzoo007]

when i add some html element in my contest i received this error
warning.js:35 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) actid="2"><div class="Contest" data
(server) actid="2">

<di

this is my contest.js

[mz026]

hi @shahidarzoo007 ,

Thanks for checking in!
Can you please try to remove the dist folder and see if the issue persists?