NextJS with Typescript throwing hydration error
See original GitHub issueCurrent Behavior
Hydration error being thrown in NextJS v12.1.5 React version 18.1.0. Error goes away when replacing the React-Player element with video tag.
Error says:
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Call Stack
throwOnHydrationMismatch
node_modules/react-dom/cjs/react-dom.development.js (14388:0)
tryToClaimNextHydratableInstance
node_modules/react-dom/cjs/react-dom.development.js (14401:0)
updateSuspenseComponent
node_modules/react-dom/cjs/react-dom.development.js (21166:0)
beginWork
node_modules/react-dom/cjs/react-dom.development.js (22453:0)
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js (4161:0)
Object.invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js (4210:0)
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js (4274:0)
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js (27405:0)
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js (26513:0)
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js (26422:0)
renderRootSync
node_modules/react-dom/cjs/react-dom.development.js (26390:0)
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js (25694: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)
Expected Behavior
Expect video element to load without throwing next hydration error.
Steps to Reproduce
- Download most recent version of NextJS and create project using yarn create
- Install React player using yarn
- Use react player in a nested component with a local file in the public directory
Environment
- URL attempting to play: local file /backing_one.mp4 in public folder
- Browser: Chrome 100.0.4896.127 (Official Build) (arm64)
- Operating system: Mac OS Monterey v 12.2
- jsFiddle example: js fiddle doesn’t work with nextjs so code is below
Other Information
export default function Video({bpm, chords}: videoProps) {
const [chord, setChord] = useState("")
bpm = (60000/bpm) * 4;
function getChord(seconds: number) {
if (seconds == 0) {
return
}
var isBeat = Number((seconds % bpm).toFixed(2));
console.log(isBeat);
if (isBeat == 0) {
var beatNum = (Math.round(Number(seconds / bpm)) % 4);
console.log(beatNum);
setChord(chords[beatNum].chord);
console.log(chords[beatNum].chord);
};
};
return (
<div>
<ReactPlayer progressInterval={.001} onProgress={(p) => getChord(p.playedSeconds)} controls url={"/backing_one.mp4"} />
<p>Current Chord: {chord}</p>
</div>
)
}
Issue Analytics
- State:
- Created a year ago
- Reactions:1
- Comments:5
Top Results From Across the Web
react-hydration-error - Next.js
An example of this is using window in a component's rendering. Another example: Invalid HTML may cause hydration mismatch such as div inside...
Read more >How To Solve Hydration Error In Next.js | by Westin Tang
The code in react-dom will use tryHydrate to try the hydrate operation, if it fails, the mode and flags will be checked and...
Read more >Nextjs hydration error when I change language - Stack Overflow
When I use English language the app throws me the following errors, while in Italian everything seems to be all right.
Read more >Debugging Hydration Errors : r/nextjs - Reddit
So some sort of hydration error due to mismatched markup. I have dealt with plenty of these before in past isomorphic problems, but...
Read more >react hydration error nextjs | The AI Search Engine You Control
Error : This Suspense boundary received an update before it finished hydrating. This caused the boundary to switch to client rendering. The usual...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });
You can simply use dynamic imports that are available as part of next.js
I fixed this by checking for if the window has rendered, and then rendering the video component. This fix works but I think some out of the box checks for if the window has rendered could be worth it. Code below: