Warning: owner-based and parent-based contexts differ when use 'react-router' component inner modal

[minhtranite]

Code example:

var React = require('react');
var Modal = require('react-modal');
var {Link} = require('react-router');

Modal.setAppElement(document.body);
Modal.injectCSS();

require('../assets/styles/modal.scss');

var PageModal = React.createClass({
  render: function () {
    return (
      <Modal isOpen={true} className='modal-dialog'>
        <div className="modal-content">
          <div className='modal-body'>
            <p>Modal Content</p>
            <Link to='page-home'>Home</Link>
          </div>
        </div>
      </Modal>
    );
  }
});

module.exports = PageModal;

Console log:

"Warning: owner-based and parent-based contexts differ (values: `function (props, context) {
"use strict";

          // This constructor is overridden by mocks. The argument is used
          // by mocks to assert on what gets mounted.

          if ("production" !== process.env.NODE_ENV) {
            ("production" !== process.env.NODE_ENV ? warning(
              this instanceof Constructor,
              'Something is calling a React component directly. Use a factory or ' +
              'JSX instead. See: http://fb.me/react-legacyfactory'
            ) : null);
          }

          // Wire up auto-binding
          if (this.__reactAutoBindMap) {
            bindAutoBindMethods(this);
          }

          this.props = props;
          this.context = context;
          this.state = null;

          // ReactClasses doesn't have constructors. Instead, they use the
          // getInitialState and componentWillMount methods for initialization.

          var initialState = this.getInitialState ? this.getInitialState() : null;
          if ("production" !== process.env.NODE_ENV) {
            // We allow auto-mocks to proceed as if they're returning null.
            if (typeof initialState === 'undefined' &&
                this.getInitialState._isMockFunction) {
              // This is probably bad practice. Consider warning here and
              // deprecating this convenience.
              initialState = null;
            }
          }
          ("production" !== process.env.NODE_ENV ? invariant(
            typeof initialState === 'object' && !Array.isArray(initialState),
            '%s.getInitialState(): must return an object or null',
            Constructor.displayName || 'ReactCompositeComponent'
          ) : invariant(typeof initialState === 'object' && !Array.isArray(initialState)));

          this.state = initialState;
        }` vs `undefined`) for key (router) while mounting Link (see: http://fb.me/react-context-by-parent)" app.js:11529:7

[Jmaharman]

Exactly the same problem here.

[gabadi]

Me too

[bartimaeus]

I've been getting this warning too.

[slorber]

Hi,

This happens when you use React contexts. So this may happen if you try to use a library that relies on React contexts inside the modal, like many Flux implementations, but also React-Intl and things like that. When your modal content uses a Mixin of a framework, this is probably using contexts too.

If you are looking for a solution to this problem check this issue:
facebook/react#4081

As of React 0.14, React will not anymore forward the context to the modal, and react-modal should use renderSubtreeIntoContainer instead of render to fix this problem.

As of 0.13 we have this boring warning.
You can fix it by building react with NODE_ENV=production , or by mokey-patching this useless warning:

var warn = console.warn;
var warningFilterKey = function(warning) {
    return warning.indexOf("Warning: owner-based and parent-based contexts differ") >= 0
};
var throttledWarn = _.throttle(function() {
    warn.call(console,"Throttled warning about React owner/parent based contexts, see https://github.com/facebook/react/issues/4081 for reasons");
    warn.apply(console, arguments);
},60000);
console.warn = function() {
    if ( arguments && arguments.length > 0 && typeof arguments[0] === "string" && warningFilterKey(arguments[0]) ) {
        throttledWarn.apply(throttledWarn,arguments);
    }
    else {
        warn.apply(console, arguments);
    }
};

[claydiffrient]

There hasn't been much traction on this issue in over a year. I'm assuming that this is no longer an issue. If it is, please feel free to re-open.