react-rails: turbolinks:before-render for unmounting causes warnings

Help us help you! Please choose one:

My app crashes with react-rails, so I’ve included the stack trace and the exact steps which make it crash.
My app doesn’t crash, but I’m getting unexpected behavior. So, I’ve described the unexpected behavior and suggested a new behavior.
I’m trying to use react-rails with another library, but I’m having trouble. I’ve described my JavaScript management setup (eg, Sprockets, Webpack…), how I’m trying to use this other library, and why it’s not working.
I have another issue to discuss.

This change https://github.com/reactjs/react-rails/commit/ecfdc5276e9d5f14df581118075317d3515a709a has been causing warnings in the console for me. I’ve followed the standard setup process described in the README. I’m using turbolinks 5 on a new rails 5 app.

When navigating from a page with a react component to one that does not have one and then back I receive the following warning:

react.self-233f9d8….js?body=1:20479 Warning: unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React.

I can resolve the error by adding this to my application.js file:

ReactRailsUJS.handleEvent('turbolinks:before-cache', function() {
  window.ReactRailsUJS.unmountComponents();
);

essentially undoing this

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 9
Comments: 32 (8 by maintainers)

Most upvoted comments

Alternatively (from comments under my article):

document.addEventListener("DOMContentLoaded", reactOnRailsPageLoaded)
document.addEventListener('turbolinks:render', reactOnRailsPageLoaded)
document.addEventListener('turbolinks:before-render', reactOnRailsPageUnloaded)

sevos on Mar 15, 2017

Exact same issue here: Warning: unmountComponentAtNode(): The node you’re attempting to unmount was rendered by another copy of React. Any idea how to fix this without having to override ract-rails code?

It looks like it’s related to Turbolinks cache. If cache is disabled, it fixes this issue:

<head>
  ...
  <meta name="turbolinks-cache-control" content="no-cache">
</head>

benoitongit on Dec 12, 2016

Ah, I have this problem and found this thread. It’s closed, but what do I do to fix the problem? Use the Github version of the gem rather than the published version?

And what else do I need to do? I see loads of comments about changing Turbolinks caching, but I’ve no idea what I have to do.

My problem is very simple. I’ve created a Bootstrap tabbed page using React.DOM.etc any time I click on the tabs I get this warning and the tabbed panes don’t update.

JohnSmall on Apr 16, 2017