预期的服务器 HTML 在 <div> 中包含匹配的 <div>。下一个 JS 错误答案

【问题标题】：Expected server HTML to contain a matching <div> in <div>. Next JS error预期的服务器 HTML 在 <div> 中包含匹配的 <div>。下一个 JS 错误
【发布时间】：2021-08-06 08:31:26
【问题描述】：

我正在使用 next.js 创建一个 whatsapp 克隆。在第一次加载应用程序时出现此错误。

  Warning: Expected server HTML to contain a matching <div> in <div>.
    at div
    at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621219033615:37232:19450)
    at div
    at Paper (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:45091:23)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:64751:31)
    at div
    at Drawer (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:33839:29)
    at WithStyles (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:64751:31)
    at SideBar (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:67329:75)
    at div
    at O (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621219033615:37232:19450)
    at Chat (http://localhost:3000/_next/static/chunks/pages/chat.js?ts=1621219033615:73282:70)
    at SideMenuProvider (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621219033615:25916:23)
    at MyApp (http://localhost:3000/_next/static/chunks/pages/_app.js?ts=1621219033615:31532:24)
    at ErrorBoundary (http://localhost:3000/_next/static/chunks/main.js?ts=1621219033615:726:47)
    at ReactDevOverlay (http://localhost:3000/_next/static/chunks/main.js?ts=1621219033615:829:23)
    at Container (http://localhost:3000/_next/static/chunks/main.js?ts=1621219033615:8388:5)
    at AppContainer (http://localhost:3000/_next/static/chunks/main.js?ts=1621219033615:8876:24)
    at Root (http://localhost:3000/_next/static/chunks/main.js?ts=1621219033615:9012:25)

我完全不知道这个错误的来源。而且他们也没有指定从哪个文件发生错误。

由于此错误，App UI 会因此而崩溃 Actual UI of APP 对此 Errored UI of APP

如果有人知道为什么会这样，请帮助我。

_document.js 代码在这里

import React from "react";
import Document, { Html, Main, NextScript, Head } from "next/document";
import { ServerStyleSheets } from "@material-ui/core/styles";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head>
          {/* Meta Tags for SEO */}
          <meta charSet="utf-8" />
          <meta httpEquiv="X-UA-Comatible" content="IE=edge" />
          <meta
            name="description"
            content="A WhatsApp clone made using next js and firebase."
          />
          <meta name="keywords" content="WhatsApp Clone" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

MyDocument.getInitialProps = async (ctx) => {
  const sheets = new ServerStyleSheets();
  const originalRenderPage = ctx.renderPage;

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
    });

  const initialProps = await Document.getInitialProps(ctx);

  return {
    ...initialProps,
    styles: [
      ...React.Children.toArray(initialProps.styles),
      sheets.getStyleElement(),
    ],
  };
};

【问题讨论】：

发生这种情况是因为服务器上生成的 HTML 与客户端最初呈现的内容不匹配。您是否有任何机会使用任何组件库？
@juliomalves 是的。我正在使用 Material UI 和 Styled Components。如果有任何想法如何解决，请告诉我。
您的_document 是什么样的？您是否为这些正确设置了 SSR？查看Next.js with Material UI 和styled-components with Next.js。
可以看到_document.js上面的代码。我已经在我的代码中复制粘贴了该回购代码。

标签： javascript next.js

【解决方案1】：

您可能需要动态导入组件：

const MyDynamicComponent = dynamic(() => import('./myComponent'))

【讨论】：