server & client className did not match

Question

So i am using webpack and css-loader with localIndentName for server side rendering my app with react. I am using css modules to import css for sepecific components. Now the problem is while importing styles in a component the server is returning the css mapped object inside a local key so server is unable to find styles.className while on the client side everything works fine.

this is my edited rules config for both server and client

{
        test: /\.css$/,
        use: [
            {
                loader: 'css-loader',
                options: {
                    modules: true,
                    localIdentName: '[local]__[hash:base64:4],
                    camelCase: true
                }
            }
        ],
}

this is server server is getting when i console log any imported style

[ [ 107,
    '',
    '' ],
  toString: [Function],
  i: [Function],
  locals: { 'class-name': 'class-name__3WnY' } ]

This is what my client is complaining

Warning: Prop `className` did not match. Server: "" Client: "class-name__3WnY"

Why such behavior?

score 1 · Answer 1 · answered Jun 14 '19 at 00:34

The error was caused by the incorrect loader in server side.

In server side, we should use

loader: 'css-loader/locals',

While in client side, we should use

loader: 'css-loader',

For the full webpack configuration, please check this answer I made before. Hope it helps.

server & client className did not match

1 Answers1