Как устранить ошибку стилей и несовпадение className server с client при использовании chakra-react-select в Next.js?

Question

[Тимур Ващенко]

Я разрабатываю проект на Next.js с использованием Chakra UI. У меня возникла проблема с компонентом Select из библиотеки chakra-react-select. К сожалению, встроенный компонент Select предоставляет ограниченные возможности, поэтому я решил использовать пакет chakra-react-select.

Однако, при использовании chakra-react-select вместе с Next.js, стили компонентов ломаются. Кроме того, я получаю следующую ошибку:

Warning: Prop className did not match. Server: 'css-1eohtqe' Client: 'css-19j6mvg`

Я использую Windows и следующие версии пакетов: React 18, Next.js 13.4.9, chakra-ui/react 2.7.1 и chakra-react-select 4.6.0.

Вот мой код:

<Container mb={16}>
  <FormControl id="chakra-react-select-demo" p={4}>
    <FormLabel>chakra-react-select demo</FormLabel>
    <Select
      instanceId="chakra-react-select-1"
      isMulti
      name="colors"
      options={tasks}
      placeholder="Select some colors..."
      closeMenuOnSelect={false}
    />
  </FormControl>
</Container>

Я уже пробовал решения, которые в данный момент можно нагуглить, но к сожалению они и примеры с онлайн-песочниц мне не помогли :(
Я буду признателен за помощь в решении этой проблемы. Спасибо!

Comments

[Mertico]

Выглядит, как разная генерация классов например в module.css при импортирование их из js

Answer 1

[Тимур Ващенко]

Чтобы решить данную проблему можно воспользоваться технологией dynamic imports.
Отдельно спасибо добродеятелям из чата Next.js!

Для меня код будет выглядеть следующим образом:

const SelectDynamic = dynamic(() => import('chakra-react-select').then((module) => module.Select), {
    ssr: false,
    loading: () => <Spinner />
});