时间戳

首页 > 解决方案 > 预期的服务器 HTML 包含匹配项

在
. 下一个 JS 错误

javascript - 预期的服务器 HTML 包含匹配项
在
. 下一个 JS 错误

问题描述

我正在使用 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 从 APP 的此 实际 UI 到 APP 的此 错误 UI

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

_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(),
    ],
  };
};

标签： javascriptnext.js

解决方案

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

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

推荐阅读