shakacode / old-react-on-rails-examples

Various example apps for React on Rails, outdated
1 stars 0 forks source link

add DevTools #25

Closed Judahmeek closed 7 years ago

Judahmeek commented 7 years ago

use of dispatcher, inspector, filterable-log-monitor, and/or slider-monitor (as the default/first child of dock-monitor anyway) all result in:

Uncaught Error: ReactOnRails encountered an error while rendering component: App. webpack:///./~/react-on-rails/node_package/lib/clientStartup.js?:149
Uncaught Error: ReactOnRails encountered an error while rendering 
Original message: 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?:44)
    at Object.addComponentAsRefTo (webpack:///./~/react-dom/lib/ReactOwner.js?:68)
    at attachRef (webpack:///./~/react-dom/lib/ReactRef.js?:23)
    at Object.ReactRef.attachRefs (webpack:///./~/react-dom/lib/ReactRef.js?:42)
    at ReactDOMComponent.attachRefs (webpack:///./~/react-dom/lib/ReactReconciler.js?:23)
    at CallbackQueue.notifyAll (webpack:///./~/react-dom/lib/CallbackQueue.js?:76)
    at ReactReconcileTransaction.close (webpack:///./~/react-dom/lib/ReactReconcileTransaction.js?:80)
    at ReactReconcileTransaction.closeAll (webpack:///./~/react-dom/lib/Transaction.js?:206)
    at ReactReconcileTransaction.perform (webpack:///./~/react-dom/lib/Transaction.js?:153)
    at batchedMountComponentIntoNode (webpack:///./~/react-dom/lib/ReactMount.js?:126)
Judahmeek commented 7 years ago

I think (but am not absolutely sure...) that the issue is orphan elements such as https://github.com/YoruNoHikage/redux-devtools-dispatch/blob/27396aa89f4e762f855faffc1ebaf1f8f39cd7b9/src/Dispatcher.js#L195, which were apparently perfectly good back in the day, but (if I'm right) don't provide the element with an owner, even though they have a parent. This causes ReactOwner.addComponentAsRefTo to throw the error in the comment above.

It would be easier to confirm these suspicions if I could figure out how to transverse the browser's component graph, but till then, I think I'll see if I get the same error on https://github.com/YoruNoHikage/redux-devtools-dispatch/tree/master/examples/counter after I've updated its dependencies and If I can get rid of the error by modifying its source code.

robwise commented 7 years ago

Hey, you're turning on dev tools and sending development-only libraries to the client in production. We need to change this ASAP as this is a no-no

Judahmeek commented 7 years ago

Ah, yes. I meant to address this, but got distracted by everything else. ;-;