服务器和客户端类名不匹配答案

【问题标题】：server & client className did not match服务器和客户端类名不匹配
【发布时间】：2019-10-24 01:10:58
【问题描述】：

所以我使用 webpack 和 css-loader 和 localIndentName 来在服务器端渲染我的应用程序。我正在使用 css 模块为特定组件导入 css。现在的问题是，在组件中导入样式时，服务器在本地键中返回 css 映射对象，因此服务器无法找到 styles.className 而在客户端一切正常。

这是我为服务器和客户端编辑的规则配置

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

这是我在控制台记录任何导入的样式时获取的服务器服务器

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

这就是我的客户抱怨的原因

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

为什么会有这样的行为？

【问题讨论】：

标签： javascript reactjs webpack server-side-rendering css-loader

【解决方案1】：

该错误是由服务器端不正确的加载程序引起的。

在服务器端，我们应该使用

loader: 'css-loader/locals',

在客户端，我们应该使用

loader: 'css-loader',

完整的webpack配置请查看我之前做的this answer。希望对您有所帮助。

【讨论】：