search

tameemsafi / typewriterjs

A simple yet powerful native javascript plugin for a cool typewriter effect.
https://www.npmjs.com/package/typewriter-effect
MIT License
2.46k stars 220 forks source link

Unhandled Runtime Error #167

Open ghost opened 1 year ago

ghost commented 1 year ago

Conversation

When I use the <TypeWriter /> react component in the NextJS project, following this instruction(the second one), the website showed me an error window below.

The Error Window

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)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4164:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4213:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4277:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27451: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/react-dom/node_modules/scheduler/cjs/scheduler.development.js (266:0)
flushWork
node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js (239:0)
MessagePort.performWorkUntilDeadline
node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js (533:0)

Versions

The other problems

Also, as I typed <TypeWriter, the suggestion showed the <TypewriterClass and <TypewriterComponent components, instead of the <TypeWriter> component that the suggestions should show.

ghost commented 1 year ago

I changed the <TypeWriter /> component to <TypewriterComponent />, since it looks like a react component, but this component also threw the same error as what I mentioned.

duccanhole commented 1 year ago

I had same problem.

emilisz commented 1 year ago

Try to change parent tag to

alexRicc2 commented 1 year ago

Try to change parent tag to

Exactly, I was having the same hydation error, then I changed my parent tag from

to

and the error stoped. you can lear more here https://nextjs.org/docs/messages/react-hydration-error , they give the same example with the

tag, I believe this can happen with others tags