response-dom.development. js? 61bb: 530 Предупреждение: имя_поддержки не соответствует

Question

реакции-дом.развития. js? 61bb: 530 Предупреждение: пропеллер className не соответствует.

Сервер: "MuiTypography- root makeStyles- root -32 makeStyles- root -47 makeStyles-darkest-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1" Клиент: " MuiTypography- root makeStyles- root -32 makeStyles- root -48 makeStyles-darkest-27 makeStyles-bodySmall-43 makeStyles-noTextTransform-41 MuiTypography-body1 "

Я пробовал следующее, поэтому далеко безрезультатно:

• сконфигурированный чанк выполнения в веб-пакете, так как мы разделяем код на уровне маршрута,

optimization: {
    runtimeChunk: {
      name: 'app',
    },
  },

• проверено там только одна версия material-ui, последняя, ​​4.9.3

• среда узла одинакова как для клиента, так и для сервера

• пробовал обертывание клиента и приложения в stylesprovider с fre sh createGenerateClassName:

server:

const sheets = new ServerStyleSheets();

      const generateClassName = createGenerateClassName({
        productionPrefix: 'tock',
      });

      const html = ReactDomServer.renderToString(
        sheets.collect(
          <Provider store={store}>
            <StaticRouter location={req.url} context={routerContext}>
              <StylesProvider generateClassName={generateClassName}>
                <Application />
              </StylesProvider>
            </StaticRouter>
          </Provider>
        )
      );

, а также обеспечение создания нового ServerStyleSheets на любой запрос.

клиент:

const generateClassName = createGenerateClassName({
    productionPrefix: 'tock',
  });
  try {
    (fullRender ? ReactDOM.render : ReactDOM.hydrate)(
      <StrictMode>
        <Provider store={store}>
          <Router history={tockHistory}>
            <StylesProvider generateClassName={generateClassName}>
              <Routes />
            </StylesProvider>
          </Router>
        </Provider>
      </StrictMode>,
      document.querySelector('#Root')
    );
  } catch (e) {
    // eslint-disable-next-line no-console
    console.error(e);
    throw e;
  }

следовал эталонной реализации: https://material-ui.com/guides/server-rendering/

это, кажется, происходит только в режиме разработки. Если я собираю для производства и запускаю приложение, оно работает.

проработал: https://material-ui.com/getting-started/faq/#my -app-doesnt-render-правильно-на-сервере

конкретно, меня заинтересовало это: https://material-ui.com/getting-started/faq/#react -class-name-hydration-mismatch

Узел: v13.8.0 Webpack: 4.41.6 Material-ui: 4.9.3

компонент, с которого мы начали сталкиваться с этой проблемой Интересно, что используются некоторые стили, основанные на проп:

export const useTypographyStyles = makeStyles((theme) => ({
  root: {
    marginBottom: ({ mb, paragraph }: TypographyProps) =>
      paragraph ? theme.spacing(2) : theme.spacing(mb ?? 0),
  },

, который, как я заметил, генерирует 2 строки для классов в ловушке.

root: "makeStyles-root-32 makeStyles-root-232"

- это то, что я получаю, когда регистрирую результат:

const classes = useTypographyStyles({ mb, paragraph });

, но если я делаю обычный стиль там только со значением, я не получаю проблему.

Answer 1

Я знаю, что это не сильно помогает, но изменение специфицированной c ошибки запуска className сработало для меня. У меня был класс с именем EmojiWrapper, и он выдавал ошибку разницы между клиентом и сервером. Поэтому я переименовал его, и проблема ушла. Я думаю, что это связано с кэшированием.