Meteor 1.3 - React is not defined when using npm React

[stolinski]

I'm using React from npm with Meteor 1.3 and am having issues getting FlowRouter + Meteor React Layout working.

Exception from Tracker recompute function:
debug.js:41 ReferenceError: React is not defined
    at FlowRouter.route.action [as _action] (routes.jsx:4)
    at Route.callAction (route.js:51)
    at router.js:447
    at Object.Tracker.nonreactive (tracker.js:589)
    at router.js:431
    at Tracker.Computation._compute (tracker.js:323)
    at Tracker.Computation._recompute (tracker.js:342)
    at Object.Tracker._runFlush (tracker.js:481)
    at Object.Tracker.flush (tracker.js:441)
    at Router._invalidateTracker (router.js:489)

If you import React in my routes.jsx file, you get this

invariant.js:39 Uncaught Error: Invariant Violation: 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).
invariant @ invariant.js:39ReactOwner.addComponentAsRefTo @ ReactOwner.js:67attachRef @ ReactRef:23ReactRef.attachRefs @ ReactRef:42attachRefs @ ReactReconciler:21assign.notifyAll @ CallbackQueue.js:65ON_DOM_READY_QUEUEING.close @ ReactReconcileTransaction:81Mixin.closeAll @ Transaction.js:202Mixin.perform @ Transaction.js:149batchedMountComponentIntoNode @ ReactMount.js:282Mixin.perform @ Transaction.js:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy:62batchedUpdates @ ReactUpdates.js:94ReactMount._renderNewRootComponent @ ReactMount.js:476wrapper @ ReactPerf.js:66ReactMount._renderSubtreeIntoContainer @ ReactMount.js:550ReactMount.render @ ReactMount.js:570wrapper @ ReactPerf.js:66(anonymous function) @ react_layout.js:69(anonymous function) @ react_layout.js:87(anonymous function) @ react_layout.js:86
debug.js:41 Exception from Tracker recompute function:

[arunoda]

Okay.

This is due to the reason that, we've multiple copies on React. Hope you are trying to use React as a node module. Right?

Solution is to create a version of ReactLayout directly loaded from the npm. I'll work on it.

[stolinski]

Yep! React as a node module. I figured that was the issue. Thank you!

[stolinski]

Should react-mounter be permanently used instead of meteor-react-layout?

[SylarRuby]

Im using beta 4 of Meteor 1.3 and no issues. I doubt its an issue with react layout

[SylarRuby]

Dont install meteor add react if you have done so.

[stolinski]

@SylarRuby I had not. This issue had already been closed. I was just wondering about the status of React Layout vs React Mounter in the future.

[arunoda]

Okay. You should not ReactLayout after Meteor 1.3+
Just use react-mounter and get React from NPM.

See: Getting Started with Meteor 1.3 and React

[timothyarmes]

Can you please explain why we shouldn't use ReactLayout with Meteor 1.3? I understand the double-React issue, however I was planning on forking ReactLayout so that it imports React from npm rather than using the meteor package. Are there any other incompatibilities that I should be aware of?

I can't use react-mounter. I've just tried it and it breaks by project since it doesn't have server-side support.

My project used to use FlowRouter SSR + ReactLayout quite happily.
Now I wish to use Meteor 1.3, nom-based React + FlowRouter SSR.

Thanks,

Tim

[arunoda]

@timothyarmes react-mounter will be SSR ready soon. (in this week)
And SSR work in the FlowRouter is complete :)

[tawan969]

@arunoda
I must worry ?
modules.js:22694 Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server: