react-bootstrap: Cannot read property 'contains' of undefined

Quite often our Sentry catches this error, however I haven’t been able to reproduce it myself.

We use "react-bootstrap": "^0.28.2" Error happened on different browsers, but mostly in Chrome on Windows.

It is coming from this line in Modal:

var modalContent = this.getDialogElement();
var current = _domHelpersActiveElement2['default'](_utilsOwnerDocument2['default'](this));
var focusInModal = current && _domHelpersQueryContains2['default'](modalContent, current);

Looks like modalContent sometimes is undefined. Just as a refresher, your getDialogElement function looks like this:

getDialogElement: function getDialogElement() {
        var node = this.refs.modal;
        return node && node.lastChild;
      },

screenshot 2016-03-31 10 33 11

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 16 (6 by maintainers)

Most upvoted comments

Solution

@jquense is correct, there were multiple versions of react being loaded by webpack, because other dependent modules also required react, but were not using the same version.

I solved this with help from this article by adding a module resolution alias to my webpack.config.js:

    resolve: {
        alias: {
            "react": __dirname + "/node_modules/react"
        }
    },

this forces webpack to always use the version of react that my app’s package.json has specified.

Thank you @jquense for sharing your knowledge and helping me resolve this. I learned something valuable from you.

brendensoares on Aug 9, 2016

dmitrika on Sep 28, 2017

Seems like the modals are not working with React 16, as @dmitrika said, check #2812

fabioespinosa on Oct 10, 2017

What? No library should ever declare react or react-dom as a runtime dependency. At most they should be peer dependencies. If you’re seeing this issue, you should contact the maintainers of the offending packages to not do that.

taion on Aug 9, 2016

You are trying to add a ref to an element that is being created outside of a component’s render() function

this is usually the error thrown when there is mroe than one React/ReactDom instance

Notice I am using webpack.

Which may be pulling in multiple copies of React without you realizing it. Its a fairly common issue we see, even if it seems unlikely.

jquense on Aug 9, 2016

it looks like you have more than one copy of React being pulled in to you bundle

jquense on Aug 9, 2016

I am experiencing this same issue where a change in state (Redux) triggers the display of a Modal. In my case I’m getting this error when the code that triggers the state change is placed in componentWillMount(). If I move the code to componentDidMount() then I no longer see this error and the Modal triggers appropriately, as many times as necessary. The code triggering this Redux state change lives in a child component of a parent, where the Modal is actually defined. Essentially my Modal is a “Loading, please wait…” message whenever async things are happening, that comes and goes as needed.

wphampton on Apr 1, 2016

if its fairly sporadic my guess its probably just a race condition with Refs being unbound. Perhaps a Modal quickly mounting and unmounting?

jquense on Mar 31, 2016