Need help for css modules with server rendering

[kidjp85]

Hi Shakacode, thank you for great tutorial.

I'm facing one problem when using css-modules in server rendering.
Generated markup in server has different class name with client render markup like below

 (client) lass="header__root__26NE0" data-reactroo
 (server) lass="header__root__LX8W9" data-reactroo

When app run in production mode, server rendered component layout is crashed until it's re-rendered again in client.

Can you give me any advice to show this issue ? Thank you

[justin808]

@kidjp85 Please create a sample reproduction case and let's investigate it.

[justin808]

@kidjp85 Is this a general question or specific to this example?

[kidjp85]

Hi @justin808 , thank you for your response. I have one component which I want to render in both server and client like below

Header component

import React from 'react'
import styles from './header.scss'

export default () =>
  <Header className={styles.root}>
    ......
  </Header>

In ServerRegistration.js

import Header from 'components/header'
import ReactOnRails from 'react-on-rails'
import appStore from 'stores'

// Register apps and stores for server rendering
ReactOnRails.register({
  Header
})

ReactOnRails.registerStore({
  appStore
})

In ClientRegistration.js

import Header from 'components/header'
import ReactOnRails from 'react-on-rails'
import appStore from 'stores'

// Register apps and stores for server rendering
ReactOnRails.register({
  Header
})

ReactOnRails.registerStore({
  appStore
})

....other client code .....

And I used 2 separated webpack config to generate server_bundle.js and client_bundle.js . But the class name of components in server side and client side are different .

 (client) lass="header__root__26NE0" data-reactroo
 (server) lass="header__root__LX8W9" data-reactroo

And it makes layout crash a little bit until the client rendering is finished.
Do you have any idea about this issue ?

[justin808]

@kidjp85 How is this related to this tutorial app?

If not, please post in https://forum.shakacode.com.

If you want personalized help on this, please consider our Coaching Plan.