Question

很抱歉，如果之前已经报告过这个问题，我已尝试使用Google解决方案并在此处搜索问题但我无法找到描述我的问题的内容。

我在React的控制台中收到错误，说客户端和服务器标记不匹配，校验和失败。这导致了FOUC。

考虑以下来源：

// MyComponent.scss
.myComponent {
   background: black;
}



// MyComponent.js
import styles from './MyComponent.scss';

const MyComponent = () => <div className={styles.myComponent}>Hello</div>;

export default MyComponent;

在客户端上，这可以按预期工作，styles.myComponent将按照您的预期呈现为MyComponent-myComponent-[hash]。

但是，服务器styles.myComponent未定义，因此省略了类名，这是导致控制台错误的原因，因为DOM结构不匹配。我已经记录了样式对象，看起来在服务器上有一个locals对象，这是我找到我的渲染组件名称的地方。例如

styles: {
   locals: {
     myComponent: 'MyComponent-myComponent-[hash]'
   }
}

我不知道从哪里开始查看为什么导入的css模块对象在客户端上看起来与服务器上的不同。

Answer 1

原来这是糟糕的Webpack配置。

我正在使用extract-text-plugin将CSS拉出到单独的文件中。我分别为客户端和服务器包共享了模块规则。为客户端代码创建了ExtractTextPlugin的实例，并使用此实例的extract函数来包装共享模块规则。在客户端配置中，我在插件链中指定了这个实例，但是在服务器包中我在插件链中使用了new ExtractTextPlugin()，这似乎是导致断开连接的原因。

我最终编写了一个包装函数来复制每个for bundle配置的CSS规则。

服务器端渲染导入的CSS模块不符合预期

1 个答案: