Error at unmounting since upgrading to React 18
See original GitHub issueCurrent 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
- Go to a page that renders ReactPlayer
- Navigate away from the page
Environment
- Browser: Chrome 99 and Firefox 98
- Operating system: MacOS 11.4
Issue Analytics
- State:
- Created a year ago
- Reactions:6
- Comments:9 (1 by maintainers)
Top Results From Across the Web
How to Upgrade to React 18
If removing Strict Mode fixes your app, you can remove it during the upgrade, and then add it back (either at the top...
Read more >React 18 unexpected behaviour component mount, unmount ...
This is normal. It's because of React Strict Mode which mounts-unmounts-remounts components to detect potential issues within the React app. – ...
Read more >ReactDOM.render is no longer supported in React 18
The error "ReactDOM.render is no longer supported in React 18. Use createRoot instead" occurs because the `ReactDOM.render` method has been deprecated.
Read more >The tricky behavior of useEffect hook in React 18 - Medium
React 18 introduces a new development-only check to Strict Mode. This new check will automatically unmount and remount every component, whenever a component ......
Read more >Upgrade to React 18 easily in these Quick Steps | EntheosWeb
An error message showing reactDOM.render is no longer supported would be appearing once you install React 18. To resolve this issue, ...
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
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 usescreateRoot
, and the actions are going to a page with a video and then navigating away.I believe this issue is from react 18 side and it is being caused by
componentWillUnmount
being called twice, with the second call havingthis.player
being null. I think it might be linked to an issue here https://github.com/facebook/react/issues/24280.There’s a merged commit fixing this issue but not yet published. See: https://github.com/facebook/react/pull/24308. Hopefully the fix works when published.