deep-foundation / sdk

https://deep-foundation.github.io/sdk/
The Unlicense
12 stars 10 forks source link

Error: Text content does not match server-rendered HTML. (and 2 other errors on start up of GitPod) #16

Open Konard opened 6 months ago

Konard commented 6 months ago

Screenshot_20240424_011837

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

Warning: Text content did not match. Server: "connection" Client: "Connection to Deep"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
h2
eval
ChakraComponent
Heading2
div
eval
ChakraComponent
CardHeader2
div
eval
ChakraComponent
Card2
Connection
div
eval
ChakraComponent
eval
VStack
div
eval
ChakraComponent
Page
CustomI18nProvider
ProviderCore
TokenProvider
LocalStoreProvider
CookiesStoreProviderCore
CookiesProvider
CookiesStoreProvider
QueryStoreProvider
CapacitorStoreProvider
EnvironmentProvider
ColorModeProvider
ThemeProvider
ThemeProvider
ChakraProvider
ChakraProvider2
Provider
App
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)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Other errors (at the same time)

Screenshot_20240424_012024

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

Warning: Text content did not match. Server: "connection" Client: "Connection to Deep"

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
h2
eval
ChakraComponent
Heading2
div
eval
ChakraComponent
CardHeader2
div
eval
ChakraComponent
Card2
Connection
div
eval
ChakraComponent
eval
VStack
div
eval
ChakraComponent
Page
CustomI18nProvider
ProviderCore
TokenProvider
LocalStoreProvider
CookiesStoreProviderCore
CookiesProvider
CookiesStoreProvider
QueryStoreProvider
CapacitorStoreProvider
EnvironmentProvider
ColorModeProvider
ThemeProvider
ThemeProvider
ChakraProvider
ChakraProvider2
Provider
App
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)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Screenshot_20240424_012059

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.

Component Stack
h2
eval
ChakraComponent
Heading2
div
eval
ChakraComponent
CardHeader2
div
eval
ChakraComponent
Card2
Connection
div
eval
ChakraComponent
eval
VStack
div
eval
ChakraComponent
Page
CustomI18nProvider
ProviderCore
TokenProvider
LocalStoreProvider
CookiesStoreProviderCore
CookiesProvider
CookiesStoreProvider
QueryStoreProvider
CapacitorStoreProvider
EnvironmentProvider
ColorModeProvider
ThemeProvider
ThemeProvider
ChakraProvider
ChakraProvider2
Provider
App
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)
MessagePort.performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js (533:0)
Konard commented 6 months ago

Workaround

Restart SDK, and if does not work, just close the bug.

Konard commented 5 months ago

https://nextjs.org/docs/messages/react-hydration-error https://react.i18next.com/latest/ssr

These links may be useful for fix.