Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs.

[tszekely-spotcap]

I'm getting this error in the console and I couldn't find anything related to it, so here goes:

invariant.js:38 Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).
    at invariant (webpack:///./~/fbjs/lib/invariant.js?:38:15)
    at Object.addComponentAsRefTo (webpack:///./~/jumpsuit/~/react/lib/ReactOwner.js?:69:47)
    at attachRef (webpack:///./~/jumpsuit/~/react/lib/ReactRef.js?:23:16)
    at Object.ReactRef.attachRefs (webpack:///./~/jumpsuit/~/react/lib/ReactRef.js?:42:5)
    at ReactDOMComponent.attachRefs (webpack:///./~/jumpsuit/~/react/lib/ReactReconciler.js?:24:12)
    at CallbackQueue.notifyAll (webpack:///./~/jumpsuit/~/react/lib/CallbackQueue.js?:67:22)
    at ReactReconcileTransaction.close (webpack:///./~/jumpsuit/~/react/lib/ReactReconcileTransaction.js?:81:26)
    at ReactReconcileTransaction.closeAll (webpack:///./~/jumpsuit/~/react/lib/Transaction.js?:204:25)
    at ReactReconcileTransaction.perform (webpack:///./~/jumpsuit/~/react/lib/Transaction.js?:151:16)
    at batchedMountComponentIntoNode (webpack:///./~/jumpsuit/~/react/lib/ReactMount.js?:127:15)

Following the details, I've learned that this might be caused by 2 instances of React being loaded. I've checked the code, and it seems to be true. I have React 15.3.2 in my deps and Jumpsuit has 15.3.1 in it's own deps. Digging in the code, I've noticed line 12 in devtools.js:

var _react = require('react');

To make sure, I've removed line 43 in render.js:

      _react2.default.createElement(DevTools, null),

And it seems to be fixed (removing line 44 fixed the other one, with the HSR breaking the Webpack build).

[tszekely-spotcap]

Actually it didn't fix it for good, just on initial load.

When using react-notifications (which I've used with no problems before converting everything to jumpsuit), the same thing gets thrown along with a

ReactTransitionGroup.js:144 Uncaught TypeError: Cannot read property 'componentWillEnter' of undefined(…)

later on when trying to hide the notification.

I'd say something about Jumpsuit messes up the Refs system, most likely due to loading it's own copy of React.

[tannerlinsley]

I'm working on a solution. Hopefully I'll have it out sometime today

[tszekely-spotcap]

Ok, so I've also found out the problem and solution for this:

Problem: The React, React-router, etc. (all the dependencies, really) are set with fixed versions:

"dependencies": {
    "axios": "0.14.0",
    "jumpstate": "^0.0.3",
    "query-string": "4.2.3",
    "react": "15.3.1",
    "react-dom": "15.3.1",
    "react-redux": "4.4.5",
    "react-router": "2.8.0",
    "react-router-redux": "4.0.5",
    "redux": "3.6.0",
    "redux-devtools": "3.3.1",
    "redux-devtools-dock-monitor": "1.1.1",
    "redux-devtools-log-monitor": "1.0.11",
    "redux-thunk": "2.1.0"
  },

In my project, I have the latest versions (ex. react 15.3.2) which made NPM install the non-matching versions twice, therefore introducing 2 React instances in the modules.

I'd suggest updating the dependencies and using flexible versioning like "react": "^15.3.2". (doing this on the local package.json of the project and then reinstalling the node_modules fixed it for me)

[tannerlinsley]

@tszekely-spotcap I've updated react and react-dom to use the latest minor release. Can you upgrade to jumpsuit@0.8.2 and let me know if the problem is fixed on your end? I was able to successfully use it in a fresh create-react-app, but you know how npm link is sometimes ;) ... deceiving.

[tszekely-spotcap]

@tannerlinsley Yes, this fixed the problem!

I'd also suggest doing the same for react-router (or maybe all the react / redux packages) as I have react-router 2.8.1 in my package.json and installing jumpsuit 0.8.2 also installed react-router 2.8.0. Thankfully this doesn't create any problems (or I didn't experience them yet, although I hope for the first :D)

Thank you!

[tannerlinsley]

Yeah, I thought about it, but for now it should be okay. Jumpsuit needs to use a stable combination of most of the deps, so it makes sense to only flex on the react core to avoid the multiple react instances. Thanks for the help! Hope you enjoy.

[tszekely-spotcap]

That's also true, maybe I shouldn't have react-router in my deps since jumpsuit takes care of the routing, right?

Anyways, thank you for your quick response and great job on the project!

[tannerlinsley]

Yep. You can remove an deps from your project that jumpsuit includes.
Unless you need the latest features. Then its just a question of
compatibility or upgrading the jumpsuit deps
On Wed, Oct 26, 2016 at 10:05 AM Timotheus Szekely notifications@github.com
wrote:

That's also true, maybe I shouldn't have react-router in my deps since
jumpsuit takes care of the routing, right?

Anyways, thank you for your quick response and great job on the project!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#47 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCcgf6jZdf8IMIt-YBzxxa98rNRW-ks5q33o4gaJpZM4KhJzO
.