react: Uncaught Invariant Violation: Must be mounted to trap events when replacing an image with a link to an image

I’m having a hard time narrowing a repro down for this and there seem to be a lot of required moving parts, so I’ll try to give as much information as I can.

Relevant snippet of package.json:

    "react": "15.0.0-rc.2", // repros w/ 0.14.7 as well
    "react-dom": "15.0.0-rc.2",
    "react-redux": "4.0.6",
    "react-router": "2.0.0-rc5",
    "react-router-redux": "4.0.0-rc.1",
    "redux": "3.2.1",

Our routes look something like this:

      <Route component={App}>
        <Route component={LayoutNoFooter}>
          <Route component={Page2} />
        </Route>
        <Route component={Layout}>
          <Route component={Page1} />
        </Route>
      </Route>

LayoutNoFooter simply wraps Layout and passes an additional prop in.

I have this component in the Header, which is rendered by Layout: https://gist.github.com/aaronjensen/86c9643ecc53ad4e9006

Header is a react-redux connected component.

Page1 has a componentWillUnmount that dispatches an action that ultimately toggles searchMode in HeaderLogo.

When I go from Page1 to Page2 the invariant violation fires.

If I setTimeout the action dispatch in componentWillUnmount it appears to work fine. If I replace LayoutNoFooter with Layout it appears to work fine.

The invariant violation is on the img tag of the HeaderLogo

stack

I’ve tried building a repro in codepen, with a similar structure setState calls to simulate react-router and redux, but I suspect they are doing more that would require me to actually build a repro w/ those technologies. If that would be helpful, I can work on it over time and hopefully repro it. Maybe there’s enough info here, however. Thanks!

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 28 (7 by maintainers)

Commits related to this issue

Don't include React in the injected script's bundle Related to https://github.com/facebook/react/issues/6371#issuecomment-210364313 — committed to zalmoxisus/redux-devtools-extension by zalmoxisus 8 years ago
Fix bug with double updates in a single batch Fixes #2410. Fixes #6371. Fixes #6538. I also manually tested the codepen in #3762 and verified it now works. — committed to sophiebits/react by sophiebits 8 years ago
Fix bug with double updates in a single batch Fixes #2410. Fixes #6371. Fixes #6538. I also manually tested the codepen in #3762 and verified it now works. — committed to sophiebits/react by sophiebits 8 years ago
Fix bug with double updates in a single batch (#6650) Fixes #2410. Fixes #6371. Fixes #6538. I also manually tested the codepen in #3762 and verified it now works. — committed to facebook/react by sophiebits 8 years ago
Fix bug with double updates in a single batch (#6650) Fixes #2410. Fixes #6371. Fixes #6538. I also manually tested the codepen in #3762 and verified it now works. (cherry picked from commit c1e3f7e... — committed to facebook/react by sophiebits 8 years ago
Don't include React in the injected script's bundle Related to https://github.com/facebook/react/issues/6371#issuecomment-210364313 — committed to HadesHappy/redux-devtools-extension by HadesHappy 8 years ago

Most upvoted comments

Here’s an additional codepen showing the cannot read property 'addEventListener' of null error.

http://codepen.io/chelzwa/pen/JXZeOL?editors=1010

Steps to reproduce:

Add any number of alerts
Switch pages

Although my specific error is different than @Dattaya’s, it seems likely to be related to the same cause, as I also found that this happens only if I include react-router-redux in the project. Switching <Router history={appHistory}> to <Router history={browserHistory}> and commenting out the line const appHistory = syncHistoryWithStore(browserHistory, store); fixes the issue.

chelzwa on Apr 20, 2016

@gaearon, that’s strange. In the extension’s injected script we don’t use React at all, except the fact that it is imported from redux-devtools.

I just checked the example above and the error appears also when the extension is disabled (@Dattaya, could you confirm?). So, it doesn’t seem to be related to Redux DevTools or the Chrome extension.

zalmoxisus on Apr 15, 2016

I’m having the same problem and after a bit of debugging I see that callbacks queued using transaction.getReactMountReady().enqueue e.g. trapBubbledEventsLocal or putListener sometimes are executed even after the instance has been unmounted. Is this normal?

The actual error message is a bit different in each case but it occurs in both 0.14.8 and 15.0.1.

I’m using the same stack and the weird part is that this error occurs when I click on the react-router’s Link but it doesn’t if I use the browsers back/forward buttons.

Also confirming that it’s completely unrelated to Dev Tools.

Adding another stack trace. Note that in my case it is a button element.

caterpillar_assets_360

Related #6538

stream7 on Apr 20, 2016

@zalmoxisus, that’s correct, sorry about the confusion, I might have looked in the wrong console, when trying to replicate it in my project without dev tools. It’s completely unrelated to Dev Tools.

Dattaya on Apr 15, 2016

@zalmoxisus I can confirm that the error also appears when the extension is disabled. Using react 15.0.0

pke on Apr 15, 2016

I’m not sure my case is worth investigating, the error happens only when both ~~redux-devtools~~ and react-router-redux present. But I said if I could, I would provide an example, so to hold on to my promise here it goes anyway. Steps to reproduce an error:

Open http://codepen.io/dattaya/pen/WwdqeO ~~in Chrome with redux devtools extension installed~~.
Press “Product1” link
In input field type “category2” instead of “category1”
Press on the square appeared bellow

Now in the console you should see an error: react-with-addons.js:20632 Uncaught Invariant Violation: Must be mounted to trap events

Dattaya on Apr 17, 2016