search

Yomguithereal / baobab-react

React integration for Baobab.
MIT License
310 stars 38 forks source link

Error during server side rendering #99

Closed basicdays closed 8 years ago

basicdays commented 8 years ago

Hey all,

Currently getting the following error when trying to perform server side rendering:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `RootedComponent`.
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `RootedComponent`.
    at invariant (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/fbjs/lib/invariant.js:39:15)
    at instantiateReactComponent [as _instantiateReactComponent] (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/instantiateReactComponent.js:64:134)
    at ReactCompositeComponentMixin.mountComponent (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/ReactCompositeComponent.js:223:36)
    at wrapper [as mountComponent] (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/ReactPerf.js:66:21)
    at /Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/ReactServerRendering.js:42:38
    at ReactServerRenderingTransaction.Mixin.perform (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/Transaction.js:136:20)
    at renderToString (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/react/lib/ReactServerRendering.js:40:24)
    at /Users/psanchez/wip/sandbox/web/baobab-server-rendering/lib/routes/index.js:55:44
    at Layer.handle [as handle_request] (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/express/lib/router/layer.js:95:5)
    at next (/Users/psanchez/wip/sandbox/web/baobab-server-rendering/node_modules/express/lib/router/route.js:131:13)

When I do not use a higher order root, I no longer get an error like this. Of course this means any of my components that use branching will fail. Using the wrapper root also produces a similar error.

I've recreated the error in this repo: https://github.com/basicdays/baobab-server-rendering

The relevant file is here: https://github.com/basicdays/baobab-server-rendering/blob/master/src/routes/index.js

basicdays commented 8 years ago

Oh my god. I found the issue. I was passing in the Component to be wrapped as a React Element instead of as a Component (i.e. passing it in as instead of as Stuff). My apologies, great project by the way.

Yomguithereal commented 8 years ago

Hello @basicdays. Sorry for not having been able to help you sooner. Glad to hear you found the solution :).