Блог

Я пробую создавать модули для другого проекта, который использует NextJS. Я создал простой «тестовый» компонент react, используя create-react-app в качестве базовой отправной точки. Показано ниже. Я вижу, что это отображается в проекте NextJS, но я также получаю следующую ошибку.

создать-реагировать-приложение — Тест (предлагаемая библиотека модулей)

Test.js

 import React from "react";

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

export {
  Test
};

 

index.js

 export * from "./Test";

 

Команда сборки

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

В следующем году —

индекс.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)