{"action":"closed","issue":{"url":"https://api.github.com/repos/choonkending/react-webpack-node/issues/55","labels_url":"https://api.github.com/repos/choonkending/react-webpack-node/issues/55/labels{/name}","comments_url":"https://api.github.com/repos/choonkending/react-webpack-node/issues/55/comments","events_url":"https://api.github.com/repos/choonkending/react-webpack-node/issues/55/events","html_url":"https://github.com/choonkending/react-webpack-node/issues/55","id":101357051,"number":55,"title":"Different Markup in Client and Server","user":{"login":"gsccheng","id":616415,"avatar_url":"https://avatars.githubusercontent.com/u/616415?v=3","gravatar_id":"","url":"https://api.github.com/users/gsccheng","html_url":"https://github.com/gsccheng","followers_url":"https://api.github.com/users/gsccheng/followers","following_url":"https://api.github.com/users/gsccheng/following{/other_user}","gists_url":"https://api.github.com/users/gsccheng/gists{/gist_id}","starred_url":"https://api.github.com/users/gsccheng/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gsccheng/subscriptions","organizations_url":"https://api.github.com/users/gsccheng/orgs","repos_url":"https://api.github.com/users/gsccheng/repos","events_url":"https://api.github.com/users/gsccheng/events{/privacy}","received_events_url":"https://api.github.com/users/gsccheng/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-08-17T07:35:22Z","updated_at":"2015-12-06T03:12:32Z","closed_at":"2015-12-06T03:12:32Z","body":"I am getting this warning message in the Chrome console:\r\n\r\n> 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:\r\n (client) ght:40px;width:40px;-webkit-user-select:\r\n (server) ght:40px;width:40px;user-select:none;bor\r\n\r\nIf I were to use the Mozilla browser, the client markup would be `-moz-user-select` instead of `-webkit-user-select`\r\n\r\nI've isolated the different markup to originate from:\r\nthis `content` variable from the server:\r\n```\r\n    let content = React.renderToString(React.createElement(Handler));\r\n```\r\nthis `container` argument from the client:\r\n```\r\n    render = Iso.bootstrap((state, _, container) => {...\r\n```\r\nI have modified very little from the boilerplate. I've basically only added an API call to display user information. This problem originates from me using a Material-UI React component as shown below from [my repo](https://github.com/gsccheng/rock-sifter/blob/master/app/components/Navigation.jsx\r\n)\r\n```\r\n      <Avatar>gabriel</Avatar>\r\n```\r\n\r\nI don't know if it has anything to do with it, but the results I've described above is from firing up my local server and building my app using the `npm run dev` and `npm run watch` commands. If I instead use `npm run devHotLoader` and `npm run watchHotLoader`, my elements all seem to be there, but all CSS styling seems to be completely broken and not existent.\r\n\r\nSo my questions are:\r\n1) Does the lack of styling when I am using the Hot Loader have to do with this line in `routes.js` where it seems like styling is removed? What can I do to fix this?\r\n```\r\n      html = html.replace(\"LINK\", '');\r\n```\r\n2) What can I do to remove this warning and have consistent markup in the front and back ends? Is this more of a Material-UI or Iso package issue, or just a way React components are rendered? Would I manually alter the CSS?\r\n\r\nThanks!"}}