Giters

foxhound87 / rfx-stack

RFX Stack - Universal App

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

universal render and css-modules

alisamar opened this issue · comments

commented

Hey Claudio,

css-modules is a very good idea but it's not working properly in isomorphic render.
Server side does not recognise the following code:

import cx from 'classnames';
import styles from './styles.css';
...

class Header extends Component {
    render() {
        return (
            <h1 className={cx('m0', 'py2', 'h4', styles.siteName)} >
...

It seems that the server ignore the styles.siteName class.

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) "/" class="m0 py2 h4 styles__site-name__
(server) "/" class="m0 py2 h4" data-reactid="15">

I found a topic about this subject on Github css-modules/css-modules#9 (comment)
also it seems to have found a solution css-modules/css-modules#9 (comment)

Maybe we can apply it in rfx-stack too.

commented

@alisamar Hi, you get the warning in the browser console?

It's working right for me, I cannot see this issue and I'm not able to reproduce it. First check if the stack is updated to the latest release and you're using at least node v5 / npm v3.3, and would be helpful if you can send me more info.

Thanks

commented

@foxhound87 I figured out what went wrong, It looks like a camelCase issue.
styles.siteName did not work but styles['site-name'] works just fine!

commented

It doesn't work for me. How did you fix it?

commented

@daryn-k What's the error?

commented 
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) ="" data-reactid="1" data-react-checksum
 (server) ="" data-reactid="1"><head data-reactid=
commented

You are not implementing the SSR in the right way,
as you can read in the error, your render method is impure.