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

[aaronjensen]

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

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!

[zpao]

This trapping code got moved around a bit in 15, can you paste the stack for that repro? A consistent repro we can run would be helpful, so I appreciate you trying, let us know if you do get it working.

The high level assumption here - we have some special event code for some events which don't bubble on some dom nodes. In this case it's the img in the header and likely a load (or error) event. It's possible the event is firing when componentWillUnmount is happening (which is in turn triggering a rerender and removing the img), but I would have thought that (a) this happens outside the current event loop and (b) the node is removed and event listener removed before this could happen. This unmount, setState handling code is pretty confusing though. Perhaps @spicyj knows what's up.

[sophiebits]

I don't know offhand. A repro case would be very helpful – you shouldn't ever see that error.

[aaronjensen]

@spicyj nailing it down has been tough, but I can keep trying when I get time. I'd be available for remote debugging if that'd work for you as well.

@zpao I'll get the other stack trace when I get a chance as well

[Dattaya]

I have this warning as well. I use:

+-- react@0.14.7
+-- react-router@2.0.1
`-- redux@3.3.1

In my case it happens when I'm transitioning from one page of the same component to another and dispatching an action in componentWillReceiveProps. If I don't dispatch it, there is no error. For the time being I've fixed it by putting the dispatch inside setTimeout(..., 0). Since you're saying that I shouldn't even see this error, I'll see if I can extract that failing code into a repository or a gist with all necessary dependencies (react-router, redux) if that's fine with you.

[aaronjensen]

@Dattaya that would be awesome, I haven't had time to do this myself. Thanks!

[Dattaya]

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

[jimfb]

@gaearon Sounds like this might be redux related, especially if it requires the redux devtools extension be installed. Should we move this over to that repository?

[grahaml]

I am receiving the same error in a somewhat similar context. I am trying to push a route on a page before a component is mounted. Inside componentWillMount I am trying to check the props to validate whether or not this component should even be mounted. If it shouldn't be mounted (read: if an unauthenticated user is trying to load the account page, that component should not even mount, and the user should be redirected to the login page).

If I try the same logic inside componentDidMount it works as expected.

Example:

class AccountPage extends React.Component {
  componentWillMount() {
    if (!this.props.account.isLoggedIn) {
      this.context.router.push('/login'); // Throws invariant violation "Must be mounted to trap events"
    }
  }
}

package.json has

"react": "0.14.7",
"react-redux": "4.4.1",
"react-router": "2.0.1",
"redux": "^3.3.1",

[sophiebits]

@jimfb It should be impossible to trigger this error in React, so it is a React bug even if all the repro cases use Redux.

[jimfb]

@spicyj Ah, yeah, probably true. I have no idea what the redux devtools extension is doing, but it's entirely conceivable that they're reaching into internals, in which case, it would not be a React bug. If the issue doesn't repro without the redux-devtools (which @Dattaya's comment seemed to imply) then that would seem to imply it might not be a React bug. But yeah, that's why I asked @gaearon.

[gaearon]

Redux DevTools don’t touch React internals, it’s only userland code.

[gaearon]

I can’t vouch for the Chrome extension though.
Maybe @zalmoxisus has some insight into this.

[jimfb]

Yes, sorry for any ambiguity, I was referring to the chrome extension.