Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Dropdown, Combobox, etc.] Ошибка гидрации в мобильном симуляторе #3271

Open
kostaskriaridis opened this issue Sep 19, 2023 · 3 comments
Labels

Comments

@kostaskriaridis
Copy link

Опишите ошибку
Ошибка при гидрации в мобильном симуляторе:

Warning: Expected server HTML to contain a matching <div> in <span>
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server

Чтобы воспроизвести
Шаги для воспроизведения поведения:

  1. Склонировать репозиторий
  2. Установить зависимости npm install
  3. Запустить проект npm run dev
  4. В инспекторе выбрать любой мобильный симулятор
  5. Перезагрузить страницу
  6. См. ошибку

Ожидаемое поведение
Гидрация происходит без ошибки

Скриншоты
Ошибка в мобильном симуляторе
Снимок экрана 2023-09-19 в 09 27 00

Ошибки в десктопной версии нету
Снимок экрана 2023-09-19 в 09 27 12

Укажите версию библиотеки и других пакетов:

Параметры компьютера:

  • ОС: Mac OS Big Sur 11.7
  • Браузер: Google Chrome
  • Версия: 116.0.5845.110

Дополнительный контекст
Ошибка происходит в связке с nextjs (см. репозиторий)

**Ошибка с выключенным mobileMediaQuery:
Если выключить mobileMediaQuery:

'use client';

import { THEME_2022, ThemeContext, ThemeFactory } from '@skbkontur/react-ui';

const theme = ThemeFactory.create({ mobileMediaQuery: 'not all' }, THEME_2022);

export default function ThemeProvider({ children }: { children: JSX.Element }) {
  return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>;
}

То в мобильной версии происходит следующая ошибка:

Warning: Prop `className` did not match. Server: "react-ui-k7wtko" Client: "react-ui-1l1c0tc"

В заключение
Друзья, спасибо большое, что разрабатываете и поддерживаете эту замечательную библиотеку компонентов 🙏

@zhzz
Copy link
Member

zhzz commented Sep 21, 2023

Спасибо за issue, разберемся с этим. А в каком проекте вы используете библиотеку?

@kostaskriaridis
Copy link
Author

Спасибо за ответ :-)

Мы ещё не в продакшене, но хотим сделать агенство недвижимости.
Мы планируем переопределять цвета, отступы, шрифты и прочее 👍
Мы не планируем повторить интерфейсы СКБ Контур.

Это же не противоречит этому правилу?

Описанные здесь контролы и принципы можно использовать в своих работах. Не копируйте внешний вид элементов интерфейса — это часть нашего [фирменного стиля](https://kontur.ru/brandbook).

@zhzz
Copy link
Member

zhzz commented Oct 2, 2023

Наши публичные библиотеки с указанной лицензией, такие как react-ui и react-ui-validations, можно использовать.

Покажите потом, что получится в результате 😉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Development

No branches or pull requests

2 participants