Flow Router SSR: Server error in a route when use NPM React components

[gonzalezlopezjm]

Hi, first at all, thank you for this fantastic router it's a must in my toolbox

I'm trying to make an app with Meteor and React for this i'm using Flow Router, ReactLayout, Meteorhacks:npm whith Cosmos:Browserify all of them with the Meteor's React instance. All is ok in the client. But when i try to access to a route, for example, /login, directly from the browser's navigation bar in the client the page render perfect, but the server throws me this error:

W20151026-22:27:48.181(1)? (STDERR) Error when doing SSR. path: /login   Invariant Violation: RenderForm.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
W20151026-22:27:48.187(1)? (STDERR)     at invariant (packages/react-runtime-dev/react.browserify.js:20537:1)
W20151026-22:27:48.188(1)? (STDERR)     at [object Object].wrapper [as _renderValidatedComponent] (packages/react-runtime-dev/react.browserify.js:13941:1)
W20151026-22:27:48.188(1)? (STDERR)     at [object Object].ReactCompositeComponentMixin.mountComponent (packages/react-runtime-dev/react.browserify.js:6813:1)
W20151026-22:27:48.188(1)? (STDERR)     at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (packages/react-runtime-dev/react.browserify.js:7397:1)
W20151026-22:27:48.189(1)? (STDERR)     at [object Object].wrapper [as mountComponent] (packages/react-runtime-dev/react.browserify.js:13941:1)
W20151026-22:27:48.189(1)? (STDERR)     at Object.ReactReconciler.mountComponent (packages/react-runtime-dev/react.browserify.js:14758:1)
W20151026-22:27:48.189(1)? (STDERR)     at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (packages/react-runtime-dev/react.browserify.js:13411:1)
W20151026-22:27:48.193(1)? (STDERR)     at ReactDOMComponent.Mixin._createContentMarkup (packages/react-runtime-dev/react.browserify.js:7956:1)
W20151026-22:27:48.194(1)? (STDERR)     at ReactDOMComponent.Mixin.mountComponent (packages/react-runtime-dev/react.browserify.js:7866:1)
W20151026-22:27:48.199(1)? (STDERR)     at Object.ReactReconciler.mountComponent (packages/react-runtime-dev/react.browserify.js:14758:1)
W20151026-22:27:48.185(1)? (STDERR) Error: Invariant Violation: RenderForm.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.

I think that this error is related with the React instance, beacause the router uses the Meteor's instance and the NPM uses the dependency instance, i believe... but I am not able to resolve this error.

Thank you, I'm sorry about my horrible english

[arunoda]

So, you are getting a React component as a NPM module and use it for the SSR. I can see the problem. I assume Cosmos:Browserify does not push components to the server side.

I need to confirm it with the Cosmos:Browserify team. Let' see.

[arunoda]

Just some ideas. try to put your *.browserify.js file inside a place it's viewable for the both client and server. Then it may work. Anyway, it's a good idea to build a producible repo.

[elidoran]

You're right, the intent of cosmos:browserify is to push things to the client because when using an NPM module on the server side you don't need to browserify it. You can use Npm.require() to get it (or Meteor.npmRequire() in the app with meteorhacks:npm).

However, if you want to use your browserify file to do the requiring for both your client and server scope then you can put your app.browserify.js file in a place for both client and server scopes, such as lib/, instead of client/, and it will be loaded for both the client and server. Then server files can reference the variables the same way the client does.

[arunoda]

And it's possible to have multiple *.browserify.js files right?

[space-alien]

Sorry if this post is off-topic. I just updated to Meteor 1.2.1 and noted that FlowRouter specifies cosmos:browserify 0.5.0 as a dependency. However, the Browersify readme states that for Meteor 1.2 you must use Browserify 0.8.0+

[gonzalezlopezjm]

Thank you Arunoda and Elidoran, I already have the *.browserify.js in the lib folder, and the error is still there.

I made a repo that reproduce the error, I hope help you with it SSR-NPM-Error

I think that the error is related with the React instance that is used with the NPM packages, I think that two diferent instances of React are used

[gonzalezlopezjm]

Sorry, I didn't explain the repo's example, it has two routes:

• The root route (/) is an example route without NPM modules
• The test route (/test) have a NPM module

If you visit the /test route writing the route in the browser's address bar the server throws the error in the console but in the client it renders perfectly.

[xvlqhiaa]

Any updates on this?