Invariant Violation on forceUpdate

[dcwardell7]

I am setting up a project with livereactload and react-router. Initially the project loads correctly (livereactload starts up without problems, the page renders without errors, etc.).

The first change I make is reloaded correctly in the browser, but I also get the following message in the browser:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner 
can have refs. This usually means that you're trying to add a ref to a component that doesn't 
have an owner (that is, was not created inside of another component's `render` method). 
Try rendering this component inside of a new top-level component which will hold the ref.

invariant @ invariant.js:42
ReactOwner.addComponentAsRefTo @ ReactOwner.js:70
attachRef @ ReactRef.js:23
ReactRef.attachRefs @ ReactRef.js:39
attachRefs @ ReactReconciler.js:22
assign.notifyAll @ CallbackQueue.js:68
ON_DOM_READY_QUEUEING.close @ ReactReconcileTransaction.js:81
Mixin.closeAll @ Transaction.js:207
Mixin.perform @ Transaction.js:148
Mixin.perform @ Transaction.js:134
assign.perform @ ReactUpdates.js:95
flushBatchedUpdates @ ReactUpdates.js:175
ReactPerf.measure.wrapper @ ReactPerf.js:70
Mixin.closeAll @ Transaction.js:207
Mixin.perform @ Transaction.js:148
ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js:66
enqueueUpdate @ ReactUpdates.js:215
enqueueUpdate @ ReactUpdateQueue.js:30R
eactUpdateQueue.enqueueForceUpdate @ ReactUpdateQueue.js:153
ReactComponent.forceUpdate @ ReactComponent.js:90
forceUpdateInstance @ force-update-app.js:36
forceUpdateRootInstances @ force-update-app.js:28
forceUpdateApplication @ force-update-app.js:8
(anonymous function) @ livereload-client.js:97

Any subsequent changes to code are not successfully made in the browser but I get repeats of the above error.

Any suggestions?

[milankinen]

The reason for this behavior is that LiveReactload tries to reload react-router twice which -- causing such strange invariant violations.

Unfortunately I haven't found any silver bullet yet, but instead you can use the hack described in #43 gist.

[dcwardell7]

Thanks for responding.

Yes, I saw the gist and the issue you linked too. What hack are you referring to specifically? Is it line 35 this.context.router.transitionTo('/');?

[milankinen]

Nope. The hack is to create and run routes inside window.onload function so that they are not run twice.

This however has a negative side effect: changes to your route definitions are not hot-reloaded.

[dcwardell7]

I have done more diagnosing and found the issue.

The error I experienced seems to occur whenever I cause a reload while I'm "in a Route." As an example from your gist, if I follow a taco Route and then change some code, I get the above mentioned error (though that particular example will complain about Uncaught TypeError: Cannot read property 'getCurrentParams' of undefined before it gets to the Invariant Violation). The same behavior occurs if I specify a DefaultRoute.

The window.onload solution does not resolve the error.

[milankinen]

Aah I get it... react-router is de facto nowadays so maybe I should try to implement a "built-in" for it (like react/addons)

[zrosenbauer]

+1

[milankinen]

Could you check if this problem is solved in the brand new 2.0.0-alpha2 version? https://github.com/milankinen/livereactload/tree/2.x.x

[milankinen]

Closing this one since there are no new replies since Sep 18.