Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NextJS with Typescript throwing hydration error

See original GitHub issue

Current 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
node_modules/react-dom/cjs/react-dom.development.js (14388:0)
node_modules/react-dom/cjs/react-dom.development.js (14401:0)
node_modules/react-dom/cjs/react-dom.development.js (21166:0)
node_modules/react-dom/cjs/react-dom.development.js (22453:0)
node_modules/react-dom/cjs/react-dom.development.js (4161:0)
node_modules/react-dom/cjs/react-dom.development.js (4210:0)
node_modules/react-dom/cjs/react-dom.development.js (4274:0)
node_modules/react-dom/cjs/react-dom.development.js (27405:0)
node_modules/react-dom/cjs/react-dom.development.js (26513:0)
node_modules/react-dom/cjs/react-dom.development.js (26422:0)
node_modules/react-dom/cjs/react-dom.development.js (26390:0)
node_modules/react-dom/cjs/react-dom.development.js (25694:0)
node_modules/scheduler/cjs/scheduler.development.js (266:0)
node_modules/scheduler/cjs/scheduler.development.js (239:0)
node_modules/scheduler/cjs/scheduler.development.js (533:0)

Expected Behavior

Expect video element to load without throwing next hydration error.

Steps to Reproduce

  1. Download most recent version of NextJS and create project using yarn create
  2. Install React player using yarn
  3. Use react player in a nested component with a local file in the public directory


  • 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) {
    var isBeat = Number((seconds % bpm).toFixed(2));
    if (isBeat == 0) {
        var beatNum = (Math.round(Number(seconds / bpm)) % 4);
  return (
        <ReactPlayer progressInterval={.001} onProgress={(p) => getChord(p.playedSeconds)} controls url={"/backing_one.mp4"} />
        <p>Current Chord: {chord}</p>

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

b4s36t4commented, May 9, 2022

const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

You can simply use dynamic imports that are available as part of next.js

infectingcommented, May 4, 2022

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:

export default function Video() {
    const [isSSR, setIsSSR] = useState(true);

    useEffect(() => {
    }, []);
  return (
        {isSSR ? null: <ReactPlayer controls url={"/backing_one.mp4"} />}

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found