时间戳

首页 > 解决方案 > 服务器和客户端类名不匹配

javascript - 服务器和客户端类名不匹配

问题描述

所以我使用 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"

为什么会有这样的行为？

标签： javascriptreactjswebpackserver-side-renderingcss-loader

解决方案

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

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

loader: 'css-loader/locals',

在客户端，我们应该使用

loader: 'css-loader',

有关完整的 webpack 配置，请查看我之前制作的这个答案。希望能帮助到你。

推荐阅读