tangly1024/NotionNext

[本地运行错误] 1 of 3 unhandled errors Unhandled Runtime Error

expoli opened this issue · 1 comments

描述遇到的问题
在本地运行测试的时候经常性的出现这3个错误

相应配置
相关的配置,例如notion_page_id;你的网站地址

notion_page_id: e569763e3cb44264a6dbc12dd8ed2773

截图
1.

1 of 3 unhandled errors
Unhandled Runtime Error

Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
Call Stack
checkForUnmatchedText
node_modules/react-dom/cjs/react-dom.development.js (9647:0)
diffHydratedProperties
node_modules/react-dom/cjs/react-dom.development.js (10310:0)
hydrateInstance
node_modules/react-dom/cjs/react-dom.development.js (11306:0)
prepareToHydrateHostInstance
node_modules/react-dom/cjs/react-dom.development.js (12564:0)
completeWork
node_modules/react-dom/cjs/react-dom.development.js (22181:0)
completeUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26596:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26568:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)
2 of 3 unhandled errors
Unhandled Runtime Error

Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error
Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (12507:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (12520:0)
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js (19902:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21618:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27426:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25738:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)
3 of 3 unhandled errors
Unhandled Runtime Error

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
Call Stack
updateHostRoot
node_modules/react-dom/cjs/react-dom.development.js (19849:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (21615:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27426:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26557:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26466:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26434:0)
recoverFromConcurrentError
node_modules/react-dom/cjs/react-dom.development.js (25850:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25750:0)
workLoop
node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/scheduler/cjs/scheduler.development.js (239:0)
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

环境

  • 操作系统: [例如. Linux]
  • 浏览器 [例如. firefox]
  • 版本 [e.g. 4.4.3]
Error: Text content does not match server-rendered HTML.
Error: Hydration failed because the initial UI does not match what was rendered on the server.

nextjs是服务端渲染,本地开发世会校验后端渲染的页面和前端对比是否一致,若不一致会报错。
问题暂时无解,后面在想想办法