имя_сервера и клиента не соответствует - PullRequest
Новая
       22

имя_сервера и клиента не соответствует

1 голос
/ 09 июня 2019

Так что я использую webpack и css-загрузчик с 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"

Почему такое поведение?

1 Ответ

1 голос
/ 14 июня 2019

Ошибка была вызвана неправильным загрузчиком на стороне сервера.

На стороне сервера мы должны использовать 

loader: 'css-loader/locals',

На стороне клиента мы должны использовать 

loader: 'css-loader',

Для полной конфигурации веб-пакета, пожалуйста, проверьте этот ответ Я сделал раньше. Надеюсь, это поможет.

...