Next.JS / React 18 - Hydration Error #1474

dmrobbins03 · 2022-07-08T18:40:42Z

Current Behavior

Unless react-player is loaded on the client-side using dynamic/no-ssr or useEffect, React will panic with a hydration error.

Expected Behavior

Use of SSR should not result in a hydration error.

Steps to Reproduce

Using Next.JS, import react-player and follow typical implementation instructions.
Error

Other Information

There is a great thread on Stack Overflow here (https://stackoverflow.com/questions/71706064/react-18-hydration-failed-because-the-initial-ui-does-not-match-what-was-render) where devs list various solutions to related issues.

Examples:

react and react-dom may need to be updated.
Wrapping tags improperly, such as <div> inside <p> will cause the error.
Lazy modules need to be wrapped in <Suspense>.

Please check again these scenarios in the codebase. Thank you!

The text was updated successfully, but these errors were encountered:

minamobahi · 2022-07-09T09:08:12Z

I have the same issue and I get this error while using react-player:
Error: Hydration failed because the initial UI does not match what was rendered on the server.

even when I set a preview image for light mode and no change happens in UI during hydration, I get the hydration error.
if you find any solution please let me know

narasaka · 2022-07-09T10:04:02Z

Have you tried this?

It's basically checking the window.

const Component: React.FC<SomeProps> = ({url}) =>{
  const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setHasWindow(true);
    }
  }, []);
  return (
    <>
      {hasWindow && <ReactPlayer url={url} />}
    </>
  )

ChobotkoD · 2022-07-09T10:15:18Z

For temporary solution you can downgrade react to 17.0.2 for example

minamobahi · 2022-07-09T12:43:46Z

Have you tried this?

It's basically checking the window.

const Component: React.FC<SomeProps> = ({url}) =>{
  const [hasWindow, setHasWindow] = useState(false);
  useEffect(() => {
    if (typeof window !== "undefined") {
      setHasWindow(true);
    }
  }, []);
  return (
    <>
      {hasWindow && <ReactPlayer url={url} />}
    </>
  )

I've tried this and of course it works! but this means rendering the react-player component on the client side so I need to render another thing ( like an image) on the server side. I wish the react-player would handle the SSR by itself

minamobahi · 2022-07-09T13:01:03Z

I just found out that in ReactPlayer.js the window is used in the component's rendering which is not recommended in this document and leads to Hydration Error

karlhorky · 2022-07-14T16:26:11Z

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

For now, until that happens, another workaround is to lazy-load the player using Next.js dynamic imports, as mentioned by @inderrr in this comment:

import dynamic from 'next/dynamic';

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

cookpete · 2022-07-14T18:50:48Z

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

Sounds great. I just don’t have the time or knowledge to implement, test and document it.

dmrobbins03 · 2022-07-18T04:52:49Z

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

Sounds great. I just don’t have the time or knowledge to implement, test and document it.

Can you upgrade react and react-dom or does it break? I can also submit a PR if that helps.

karlhorky · 2022-07-18T07:49:33Z

The versions of the react and react-dom packages are unrelated here, SSR support is more about things like browser globals being undefined or rendering something different on client and server, which @minamobahi mentioned in the comment above:

the window is used in the component's rendering

If you want to submit a PR, then probably best would be to:

Read a bit into the errors that can come from window being used in React components, such as the common ReferenceError: window is not defined error:

https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97

Come up with a strategy for how react-player should behave when browser globals such as window are not available. It seems like there is some work being done around window detection already:

react-player/src/ReactPlayer.js

Lines 12 to 18 in 9775bb7

    
           const IS_BROWSER = typeof window !== 'undefined' && window.document 
        
           const IS_GLOBAL = typeof global !== 'undefined' && global.window && global.window.document 
        
           const SUPPORTED_PROPS = Object.keys(propTypes) 
        
           // Return null when rendering on the server 
        
           // as Suspense is not supported yet 
        
           const UniversalSuspense = IS_BROWSER || IS_GLOBAL ? Suspense : () => null

But react-player is not rendering the same thing on client and server (which is where the Next.js error comes from).

yogesh2503 · 2022-07-21T05:51:08Z

Hi,
I have the same issue and I get this error while using react-player:
Error: Hydration failed because the initial UI does not match what was rendered on the server.

MathiasGmeiner · 2022-07-25T09:47:07Z

@yogesh2503 this works fine: #1474 (comment)

yogesh2503 · 2022-07-25T10:31:28Z

Thank
Its work for me

🎟️ [Asana Task]() 🔍 [Preview Link](https://react-components-git-{branch-slug}-hashicorp.vercel.app) ---  ## Description Unless `react-player` is loaded on the client-side using dynamic/no-ssr or `useEffect`, React will panic with a hydration error (see [this issue](cookpete/react-player#1474)). This PR updates the `InlineVideo` component to conditionally render the player if the `window` not `undefined`. ### PR Checklist 🚀 Items in this checklist may not may not apply to your PR, but please consider each item carefully. - [ ] Add Asana and Preview links above. - [ ] Conduct thorough self-review. - [ ] Add or update tests as appropriate. - [ ] Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a [Sauce Labs](https://app.saucelabs.com/) account for this, if you don't have access, just ask!). - [ ] Conduct reasonable accessibility review (use the [WAS](https://accessible.org/Web-Accessibility-Standards-WAS-2.pdf) as a guide or an [axe browser plugin](https://www.deque.com/axe/) until we establish more formal checks). - [ ] Identify (in the description above) and document (add Asana tasks on [this board](https://app.asana.com/0/1100423001970639/list)) any technical debt that you're aware of, but are not addressing as part of this PR.

koliada-max · 2022-12-08T21:58:21Z

Its work for me

To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), {
ssr: false,
})

makyinmars · 2022-12-19T23:35:58Z

Its work for me

To dynamically load a component on the client side, you can use the ssr option to disable server-rendering. This is useful if an external dependency or component relies on browser APIs like window.

import dynamic from 'next/dynamic'

const DynamicHeader = dynamic(() => import('../components/header'), { ssr: false, })

Thank you, just what I was looking for 👍

panzacoder · 2023-03-11T06:21:15Z

The versions of the react and react-dom packages are unrelated here, SSR support is more about things like browser globals being undefined or rendering something different on client and server, which @minamobahi mentioned in the comment above:

the window is used in the component's rendering

If you want to submit a PR, then probably best would be to:

Read a bit into the errors that can come from window being used in React components, such as the common ReferenceError: window is not defined error:

https://dev.to/vvo/how-to-solve-window-is-not-defined-errors-in-react-and-next-js-5f97

Come up with a strategy for how react-player should behave when browser globals such as window are not available. It seems like there is some work being done around window detection already:

react-player/src/ReactPlayer.js

Lines 12 to 18 in 9775bb7

const IS_BROWSER = typeof window !== 'undefined' && window.document

const IS_GLOBAL = typeof global !== 'undefined' && global.window && global.window.document

const SUPPORTED_PROPS = Object.keys(propTypes)

// Return null when rendering on the server

// as Suspense is not supported yet

const UniversalSuspense = IS_BROWSER || IS_GLOBAL ? Suspense : () => null

But react-player is not rendering the same thing on client and server (which is where the Next.js error comes from).

Ok you were definitely on to something with this and it took me some digging but I think I figured out why this is so incompatible with SSR.

There was one bit of magic that I noticed in the Readme that struck me as odd but I couldn't figure out why. For Youtube embeds, there is an example of the actual url of the YT video, not the embed url or the id of the video. In other implementations I've seen or done for YT embeds, typically there is some more configuration needed around stripping the embed id or specifying the poster image (for a "light" version) but this handled it.

In the line you references, we are returning null on the server side, since Suspense doesn't work server side pre- React 18. I think now we could probably set a flag or do a check for the React version to enable Suspense/lazy. But that just allows the code to attempt to run in SSR.

The next piece I've seen is the call to window in the file Preview.js, and this is where the magic with the youtube URL happens:

react-player/src/Preview.js

Line 42 in 662082a

return window.fetch(oEmbedUrl.replace('{url}', url))

Basically, if the url is for youtube and a poster image isn't provided, we are fetching a YT endpoint that provides some meta about the video, including a poster image uri and html for an iframe.

I'm going to make an attempt to fix this in a universal way in a fork I made, but one big thought is on my mind: Should we be doing it this way?

I think there might be a solution that is right enough for all React environments, but ultimately if this component is handling a certain level of data fetching, it needs to have integrations with specific frameworks that can handle this in the way that it intends to do so. Since SSR and SSG is becoming the norm for react, my thoughts on a refactor would be some or all of the following:

Decouple optimizations like this throughout the repo that work to gather data not provided by the user
Provide those data fetching functions as helpers available to get the data in the way that the given framework suggests
Potentially provide examples including framework-specific implementations of the component
Provide a React 18 implementation that doesn't opt-out of Suspense in SSR

If I can find time, I will try to experiment with some of these concepts, but would be interested in feedback from @cookpete on these thoughts also.

cookpete · 2023-03-12T16:28:50Z

@panzacoder I appreciate the thought you’ve put into this. Unfortunately I think we’re at the point where a proper solution is simply not worth the time and effort it would take – you might as well rewrite the library from scratch. I have been gradually rewriting this with typescript, hooks, storybook, etc, but getting time to work on it is tricky.

There is no way to avoid using window as the whole point of the component is to load third party scripts to play a given url. There is nothing we can really render during SSR because we just don’t know what markup will be rendered by these scripts. I guess we could use noembed to fetch a thumbnail and render that, but I don’t know how intrusive that would be to the codebase. At this point I would much rather keep things simple considering how complex this library has become to satisfy such a wide range of developers/platforms.

Some ideas:

If the problem circles around lazy and Suspense should we just release v3 with it removed completely, and just let the developer decide which players to include and how to lazy load them? The majority of users are only ever using one player, and more and more users are using a platform that has lazy loading built in, like next/dynamic.
Could we somehow wrap react-player in a way that supports Next.js? So the changes in this library are minimal and we just push Next.js users towards react-player-next (or whatever we call it).

joebentaylor1995 · 2023-03-24T23:22:25Z

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

For now, until that happens, another workaround is to lazy-load the player using Next.js dynamic imports, as mentioned by @inderrr in this comment:
import dynamic from 'next/dynamic';

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

For anything not Next.... im presuming using loadable components would work a treat.

Vince66000 · 2023-03-26T08:16:39Z

I agree that ReactPlayer should be SSR-friendly out of the box, @cookpete what do you think?

For now, until that happens, another workaround is to lazy-load the player using Next.js dynamic imports, as mentioned by @inderrr in this comment:
import dynamic from 'next/dynamic';

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

works for me. thanks ! ;)

Joaoalves89405 · 2023-06-13T17:40:32Z

this comment

Having the same issue with next13 but this seems to be indeed the best solution right now. I've also took a look at the Next13 documentation: https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading

SalahAdDin · 2023-10-02T11:46:16Z

It is not possible to be used on SSR(what I think it is intended for), so we have to use it on the client side:

"use client";

import coreUtils from "@/core/application/utils";
import dynamic from "next/dynamic";

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

Otherwise, we will have the next issue:

 ⨯ node_modules/.pnpm/[email protected][email protected]/node_modules/react-player/lazy/Player.js (32:112) @ _inherits
 ⨯ TypeError: Super expression must either be null or a function
    at __webpack_require__ (/home/luisalaguna/Projects/challenge-trt/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/home/luisalaguna/Projects/challenge-trt/.next/server/webpack-runtime.js:33:42)
    at Function.__webpack_require__ (/home/luisalaguna/Projects/challenge-trt/.next/server/webpack-runtime.js:33:42)
null

# Why  After upgrading `react-player` dependency to the latest, the following hydration issue started occurring where we use `Video` component. ![image](https://github.com/expo/expo/assets/10234615/62b3b8f9-7788-468a-a0a1-2a4793236060) I found a similar open issue in React Player GitHub repo (cookpete/react-player#1474) where it states that the library is not SSR friendly and this issue happens with React 18. # How  Apply the workaround suggested [here](cookpete/react-player#1474 (comment)) which implies to lazy load the player using Next.js dynamic imports. # Test Plan  Tested this locally and there doesn't seem to be the hydration error on docs where we use the `Video` component. To test it locally, run docs locally and go to: http://localhost:3002/develop/development-builds/introduction/ # Checklist  - [ ] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [ ] Conforms with the [Documentation Writing Style Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md) - [ ] This diff will work correctly for `npx expo prebuild` & EAS Build (eg: updated a module plugin).

KelvinQiu802 · 2024-01-18T14:09:19Z

Solution in the Next.js doc

'use client'

import { useState, useEffect } from 'react'
 
export default function App() {
  const [isClient, setIsClient] = useState(false)
 
  useEffect(() => {
    setIsClient(true)
  }, [])
 
  return {isClient ? <ReactPlayer /> : <p>The video player cannot render on the server side</p>}
}

christopher-theagen · 2024-03-04T14:55:26Z

Solution in the Next.js doc

'use client'

import { useState, useEffect } from 'react'
 
export default function App() {
  const [isClient, setIsClient] = useState(false)
 
  useEffect(() => {
    setIsClient(true)
  }, [])
 
  return {isClient ? <ReactPlayer /> : <p>The video player cannot render on the server side</p>}
}

from #1428, if above doesn't work, try return {isClient ? <ReactPlayer /> : null}

luwes · 2024-04-19T16:48:11Z

we have released a canary version that should resolve this issue in many cases.
Suspense is enabled and more importantly the current player's root element is rendered on the server.
please let me know if any issues arise.
https://www.npmjs.com/package/react-player/v/3.0.0-canary.0

luwes · 2024-04-20T14:34:42Z

duplicate of #1428

jiyuujin mentioned this issue Oct 13, 2022

player - use dynamic import vscodejp/conference#19

Merged

cullylarson mentioned this issue Nov 30, 2022

React.forwardRef and @emotion/babel-plugin with Next.js causes hydration error emotion-js/emotion#2926

Open

nandereck mentioned this issue Nov 30, 2022

Render react-player only if the window exists hashicorp/react-components#837

Merged

6 tasks

johnxu16 mentioned this issue Feb 6, 2023

✨Upgrade - React 18 + Next.js 13 SSWConsulting/SSW.Website#107

Closed

15 tasks

cookpete mentioned this issue Mar 24, 2023

React Minified errors #423 & #418 #1602

Closed

peeke mentioned this issue May 12, 2023

React 18 kaliberjs/build#245

Merged

eleanorreem mentioned this issue Oct 13, 2023

Update next 13.5.4, react 18.2, react-dom 18, react-player 2.13 chaynHQ/bloom-frontend#638

Merged

luwes mentioned this issue Oct 25, 2023

Super expression must either be null or a function react player on Nextjs 13 #1701

Closed

amandeepmittal mentioned this issue Oct 27, 2023

[docs] Fix hydration issue for Video component expo/expo#25072

Merged

3 tasks

shari-sushi mentioned this issue Dec 28, 2023

react-player shari-sushi/0015Laboratory#26

Open

luwes mentioned this issue Apr 19, 2024

feat!: enable Suspense by default #1775

Merged

luwes closed this as not planned Won't fix, can't repro, duplicate, stale Apr 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.JS / React 18 - Hydration Error #1474

Next.JS / React 18 - Hydration Error #1474

dmrobbins03 commented Jul 8, 2022 •

edited

Loading

minamobahi commented Jul 9, 2022

narasaka commented Jul 9, 2022

ChobotkoD commented Jul 9, 2022

minamobahi commented Jul 9, 2022

minamobahi commented Jul 9, 2022

karlhorky commented Jul 14, 2022 •

edited

Loading

cookpete commented Jul 14, 2022 •

edited

Loading

dmrobbins03 commented Jul 18, 2022

karlhorky commented Jul 18, 2022 •

edited

Loading

yogesh2503 commented Jul 21, 2022

MathiasGmeiner commented Jul 25, 2022

yogesh2503 commented Jul 25, 2022

koliada-max commented Dec 8, 2022

makyinmars commented Dec 19, 2022

panzacoder commented Mar 11, 2023

cookpete commented Mar 12, 2023

joebentaylor1995 commented Mar 24, 2023

Vince66000 commented Mar 26, 2023

Joaoalves89405 commented Jun 13, 2023

SalahAdDin commented Oct 2, 2023

KelvinQiu802 commented Jan 18, 2024

christopher-theagen commented Mar 4, 2024

luwes commented Apr 19, 2024

luwes commented Apr 20, 2024

Next.JS / React 18 - Hydration Error #1474

Next.JS / React 18 - Hydration Error #1474

Comments

dmrobbins03 commented Jul 8, 2022 • edited Loading

Current Behavior

Expected Behavior

Steps to Reproduce

Other Information

minamobahi commented Jul 9, 2022

narasaka commented Jul 9, 2022

ChobotkoD commented Jul 9, 2022

minamobahi commented Jul 9, 2022

minamobahi commented Jul 9, 2022

karlhorky commented Jul 14, 2022 • edited Loading

cookpete commented Jul 14, 2022 • edited Loading

dmrobbins03 commented Jul 18, 2022

karlhorky commented Jul 18, 2022 • edited Loading

yogesh2503 commented Jul 21, 2022

MathiasGmeiner commented Jul 25, 2022

yogesh2503 commented Jul 25, 2022

koliada-max commented Dec 8, 2022

makyinmars commented Dec 19, 2022

panzacoder commented Mar 11, 2023

cookpete commented Mar 12, 2023

joebentaylor1995 commented Mar 24, 2023

Vince66000 commented Mar 26, 2023

Joaoalves89405 commented Jun 13, 2023

SalahAdDin commented Oct 2, 2023

KelvinQiu802 commented Jan 18, 2024

christopher-theagen commented Mar 4, 2024

luwes commented Apr 19, 2024

luwes commented Apr 20, 2024

dmrobbins03 commented Jul 8, 2022 •

edited

Loading

karlhorky commented Jul 14, 2022 •

edited

Loading

cookpete commented Jul 14, 2022 •

edited

Loading

karlhorky commented Jul 18, 2022 •

edited

Loading