reactjs - TypeError：无法读取 null 的属性（读取“suppressHydrationWarning”）

Question

我正在尝试为另一个使用 NextJS 的项目构建模块。我构建了一个简单的“测试”反应组件，使用 create-react-app 作为基本起点。如下图所示。我看到它出现在 NextJS 项目中，但我也收到以下错误。

create-react-app - 测试（建议的模块库）

测试.js

import React from "react";

export default function Test() {
  return <p>Hello!</p>;
}

export {
  Test
};

index.js

export * from "./Test";

构建命令

"build": "rm -rf ./dist && cross-env BABEL_ENV=production babel src -d dist",

NextJS -

索引.tsx

import type { NextPage } from 'next'
import AboutMe from "../sections/AboutMe";
import Layout from "../layout/Layout";
import {Row, Col} from "react-bootstrap";
// @ts-ignore
import {Test} from // the packed repo

const Home: NextPage = () => {
    console.log(Test);
  return (
      <Layout>
          <Row>
              <Col>
                  <AboutMe/>
              </Col>
              <Col>
                  <p>teest</p>
                  <Test/>
              </Col>
          </Row>
      </Layout>
  )
}

export default Home

错误

Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'suppressHydrationWarning')

Call Stack
didNotFindHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (10511:0)
insertNonHydratedInstance
node_modules/react-dom/cjs/react-dom.development.js (14509:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (14596:0)
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js (17610:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (19080:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (3945:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (3994:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4056:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (23964:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (22776:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (22707:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (22670:0)
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (22293:0)
scheduleUpdateOnFiber
node_modules/react-dom/cjs/react-dom.development.js (21881:0)
updateContainer
node_modules/react-dom/cjs/react-dom.development.js (25482:0)
eval
node_modules/react-dom/cjs/react-dom.development.js (26021:0)
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js (22431:0)
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js (26020:0)
Object.hydrate
node_modules/react-dom/cjs/react-dom.development.js (26086:0)
renderReactElement
node_modules/next/dist/client/index.js (480:30)
doRender
node_modules/next/dist/client/index.js (665:4)
_callee2$
node_modules/next/dist/client/index.js (375:18)
tryCatch
node_modules/regenerator-runtime/runtime.js (63:15)
Generator.invoke [as _invoke]
node_modules/regenerator-runtime/runtime.js (294:0)
Generator.eval [as next]
node_modules/regenerator-runtime/runtime.js (119:0)
asyncGeneratorStep
node_modules/next/dist/client/index.js (28:28)
_next
node_modules/next/dist/client/index.js (46:16)
eval
node_modules/next/dist/client/index.js (51:12)
new Promise
<anonymous>
Object.eval
node_modules/next/dist/client/index.js (43:15)
Object._render
node_modules/next/dist/client/index.js (393:19)
Object.render
node_modules/next/dist/client/index.js (396:19)
eval
node_modules/next/dist/client/next-dev.js (79:15)
eval
node_modules/next/dist/client/dev/fouc.js (12:12)

标签： reactjsnext.jsnode-modules