I added a new component to my project via a private NPM package. It has the following dependencies as indicated in my project's system.config.js:
"npm:dialog@0.6.4": {
"material-ui": "npm:material-ui@0.19.4",
"prop-types": "npm:prop-types@15.6.0",
"react": "npm:react@16.2.0",
"whatwg-fetch": "npm:whatwg-fetch@1.1.1"
}
When I run my app I see the following console error:
invariant.js:21 Uncaught (in promise) Error: parentComponent must be a valid React Component
at invariant (invariant.js:21)
at unstable_renderSubtreeIntoContainer (react-dom.development.js:11680)
at RenderToLayer.renderLayer (RenderToLayer.js:119)
at RenderToLayer.componentDidMount (RenderToLayer.js:56)
at eval (ReactCompositeComponent.js:149)
at measureLifeCyclePerf (ReactCompositeComponent.js:52)
at eval (ReactCompositeComponent.js:148)
at CallbackQueue.notifyAll (CallbackQueue.js:34)
at ReactReconcileTransaction.close (ReactReconcileTransaction.js:31)
at ReactReconcileTransaction.closeAll (Transaction.js:73)
at ReactReconcileTransaction.perform (Transaction.js:39)
at ReactUpdatesFlushTransaction.perform (Transaction.js:30)
at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:60)
at Object.flushBatchedUpdates (ReactUpdates.js:104)
at ReactDefaultBatchingStrategyTransaction.closeAll (Transaction.js:73)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:39)
Some googling leads me to believe that the fact that I have multiple versions of react installed in the project could be contributing to the error. My dependencies rely on multiple versions of react, specifically: v0.14.9, v15.4.2, v16.2.0 (which is the one added here as required by this new component) and v16.3.2. I also have react-dom v15.4.2 and v16.3.2 installed. Dan Abramov wrote here that there are issues with multiple versions of react attempting to coexist in the same project. Given that my project now contains a react version higher than 16.0.0 I ran the command:
jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>
This command is recommended by React when making the jump to v16+
The part of my render() function that contains this breaking component is as follows:
{this._showDialog() &&
selectedItems.length > 0 && (
<Dialog
acm={
selectedItems.length === 1
? cachedObjects[selectedItems[0]].access
: {}
}
onSelect={(access) => {
this._onAccessSave(access)
}}
onCancel={()=>{}}
serviceBaseEndpoint={serviceEndpoint}
open={openAccess}
userObject={Auth.fetchUserIfNeeded(true)
.then(user => {
return user})
}
>
<a
id="access-button"
onClick={this._onAccessClick}
title="Set Access"
{...this._getViewState(_thingSelected)}
>
<img src="icons/padlock.svg" />
</a>
</Dialog>
)}
How can I eliminate the console error? I have to imagine this issue is related to react versions and my app configuration. My dependencies that rely on these older versions of react are mission critical and cannot be replaced. They are also up to date even though they use the old react versions. Is this a resolvable issue given this information?
