Error at unmounting since upgrading to React 18

[Cristi6]

Current Behavior

Whenever I navigate from a page that renders ReactPlayer the application crashes.
I get the following error:

 Uncaught TypeError: Cannot read properties of null (reading 'removeAttribute')
    at FilePlayer.stop (FilePlayer.js:422:1)
    at Player.componentWillUnmount (Player.js:250:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js:22683:1)
    at safelyCallComponentWillUnmount (react-dom.development.js:22705:1)
    at commitUnmount (react-dom.development.js:23556:1)
    at commitNestedUnmounts (react-dom.development.js:23603:1)
    at unmountHostComponents (react-dom.development.js:23926:1)
    at commitDeletion (react-dom.development.js:23991:1)
    at commitMutationEffects_begin (react-dom.development.js:24203:1)
    at commitMutationEffects (react-dom.development.js:24187:1)
    at commitRootImpl (react-dom.development.js:26638:1)
    at commitRoot (react-dom.development.js:26517:1)
    at finishConcurrentRender (react-dom.development.js:25820:1)
    at performConcurrentWorkOnRoot (react-dom.development.js:25648:1)
    at workLoop (scheduler.development.js:266:1)
    at flushWork (scheduler.development.js:239:1)
    at performWorkUntilDeadline (scheduler.development.js:533:1)
    at run (setImmediate.js:40:1)
    at runIfPresent (setImmediate.js:69:1)
    at onGlobalMessage (setImmediate.js:109:1)

    index.js:1 The above error occurred in the <FilePlayer> component:
    at FilePlayer (http://localhost:3000/static/js/2.chunk.js:21867:5)
    at Player (http://localhost:3000/static/js/2.chunk.js:19222:5)
    at Suspense
    at div
    at ReactPlayer (http://localhost:3000/static/js/2.chunk.js:20311:7)

Expected Behavior

I would expect not to crash, just as before upgrading to React 18.

Steps to Reproduce

1. Go to a page that renders ReactPlayer
2. Navigate away from the page

Environment

• Browser: Chrome 99 and Firefox 98
• Operating system: MacOS 11.4

[Dovalization]

See: #1428

[darinrogers]

FWIW, even on version 18, the old render method still appears to work. Just createRoot doesn't.

[Cristi6]

See: #1428

Even if that quick fix would work the problem is still there. Also, I'm not using server side rendering.

FWIW, even on version 18, the old render method still appears to work. Just createRoot doesn't.

Good point, forgot to mention that.

[seanjyjy]

I believe this issue is from react 18 side and it is being caused by componentWillUnmount being called twice, with the second call having this.player being null. I think it might be linked to an issue here facebook/react#24280.

There's a merged commit fixing this issue but not yet published. See: facebook/react#24308. Hopefully the fix works when published.

[gaearon]

18.1.0 is out so give it a try.

[darinrogers]

I can't speak for @Cristi6 but I'm still seeing crashes with createRoot. This is with both react 18.1.0 and react-player 2.10.0. But it seems to happen less often, and not every time. Does that make sense? I'm having a hard time getting exact steps to reproduce in my app, aside from going to a page with a video, then navigating away. Sometimes it crashes every time, sometimes it takes 4 or 5 tries to get it to crash.

[seanjyjy]

Upgrading to react 18.1.0 seems to be working for me without an issue. I have a similar use case as @darinrogers whereby it uses createRoot, and the actions are going to a page with a video and then navigating away.

[gaearon]

Note you need to update react-dom too when upgrading React.

[cookpete]

18.1.0 seems to have fixed this so I’ll close this for now. Thanks @gaearon for the heads up.

If anyone can reproduce it with [email protected] and [email protected] then feel free to reopen the issue with details.