Skip to content

Warn when nesting 15 subtree inside 16 #10434

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sophiebits merged 1 commit into from
Aug 13, 2017
Merged

Warn when nesting 15 subtree inside 16 #10434

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions src/renderers/dom/shared/__tests__/renderSubtreeIntoContainer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
var React = require('react');
var PropTypes = require('prop-types');
var ReactDOM = require('react-dom');
var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
var ReactTestUtils = require('react-dom/test-utils');
var renderSubtreeIntoContainer = require('react-dom')
.unstable_renderSubtreeIntoContainer;
Expand Down Expand Up @@ -299,4 +300,27 @@ describe('renderSubtreeIntoContainer', () => {
ReactDOM.render(<Parent value="foo" />, container);
expect(portal2.textContent).toBe('foo');
});

if (ReactDOMFeatureFlags.useFiber) {
it('fails gracefully when mixing React 15 and 16', () => {
class C extends React.Component {
render() {
return <div />;
}
}
const c = ReactDOM.render(<C />, document.createElement('div'));
// React 15 calls this:
// https://github.com/facebook/react/blob/77b71fc3c4/src/renderers/dom/client/ReactMount.js#L478-L479
expect(() => {
c._reactInternalInstance._processChildContext({});
}).toThrow(
'_processChildContext is not available in React 16+. This likely ' +
'means you have multiple copies of React and are attempting to nest ' +
'a React 15 tree inside a React 16 tree using ' +
"unstable_renderSubtreeIntoContainer, which isn't supported. Try to " +
'make sure you have only one copy of React (and ideally, switch to ' +
'ReactDOM.unstable_createPortal).',
);
});
}
});
25 changes: 25 additions & 0 deletions src/renderers/shared/fiber/ReactFiberClassComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@ var getComponentName = require('getComponentName');
var shallowEqual = require('fbjs/lib/shallowEqual');
var invariant = require('fbjs/lib/invariant');

const fakeInternalInstance = {};
const isArray = Array.isArray;

if (__DEV__) {
Expand All @@ -54,6 +55,27 @@ if (__DEV__) {
callback,
);
};

// This is so gross but it's at least non-critical and can be removed if
// it causes problems. This is meant to give a nicer error message for
// ReactDOM15.unstable_renderSubtreeIntoContainer(reactDOM16Component,
// ...)) which otherwise throws a "_processChildContext is not a function"
// exception.
Object.defineProperty(fakeInternalInstance, '_processChildContext', {
enumerable: false,
value: function() {
invariant(
false,
'_processChildContext is not available in React 16+. This likely ' +
'means you have multiple copies of React and are attempting to nest ' +
'a React 15 tree inside a React 16 tree using ' +
"unstable_renderSubtreeIntoContainer, which isn't supported. Try " +
'to make sure you have only one copy of React (and ideally, switch ' +
'to ReactDOM.unstable_createPortal).',
Copy link
Contributor

@flarnie flarnie Aug 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit - we could condense this and then link to docs, which could provide more info.

I think we could always improve the error message in a follow-up commit, if this comes up often for folks.

);
},
});
Object.freeze(fakeInternalInstance);
}

module.exports = function(
Expand Down Expand Up @@ -283,6 +305,9 @@ module.exports = function(
workInProgress.stateNode = instance;
// The instance needs access to the fiber so that it can schedule updates
ReactInstanceMap.set(instance, workInProgress);
if (__DEV__) {
instance._reactInternalInstance = fakeInternalInstance;
}
}

function constructClassInstance(workInProgress: Fiber, props: any): any {
Expand Down
8 changes: 4 additions & 4 deletions src/renderers/shared/shared/ReactInstanceMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,19 @@ var ReactInstanceMap = {
* supported we can rename it.
*/
remove: function(key) {
key._reactInternalInstance = undefined;
key._reactInternalFiber = undefined;
Copy link
Collaborator

@gaearon gaearon Aug 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will break hot reloading (which we just fixed). Do you mind sending a PR to react-deep-force-update to account for this change? Should be as easy as checking both fields.

},

get: function(key) {
return key._reactInternalInstance;
return key._reactInternalFiber;
},

has: function(key) {
return key._reactInternalInstance !== undefined;
return key._reactInternalFiber !== undefined;
},

set: function(key, value) {
key._reactInternalInstance = value;
key._reactInternalFiber = value;
},
};

Expand Down