React-flexbox-grid: Prop `className` не совпадает между клиентом и сервером

При настройке response-flexbox-grid вместе с sass внутри Next.js. Перед лицом этой проблемы.

Проект создан с использованием последних: create-next-app и у меня нет никаких пользовательских изменений в .babelrc

ошибка

index.js:2178 Предупреждение: Опора className не соответствует. Сервер: "col-xs-12 col-md-4 col-lg-2" Клиент: "col-xs-12__flexboxgrid2__AdoKE col-md-4__flexboxgrid2__3pbbS col-lg-2__flexboxgrid2__1x6vt"

Конфигурация Sass выглядит следующим образом:

const sassConfig = {
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: '[local]__[name]__[hash:base64:5]'
  }
};

Еще немного:

module.exports = withPlugins(
  [[withSass, sassConfig], [withCss], [optimizedImages, optimizedImagesConfig]],
  nextConfiguration
);

Пробовал в том числе и исключая flexboxgrid внутри sass конфигурация выше, но все равно не повезло.

После долгих исследований я смог решить проблему, переопределив localIdentName:[local], чтобы он соответствовал как клиенту, так и серверу рендеринга. К сожалению, если я использую: localIdentName: '[local]__[name]__[hash:base64:5]', это терпит неудачу, поскольку клиент использует: localIdentName:[local], Итак, как и где мы можем переопределить как clientIdentName? Нужно ли нам что-то играть с .babelrc?

Источник

0 ответов

Другие вопросы по тегам