Namespacing JS Components and Server Side Rendering #265
Description
I'm having a difficult time migrating over to server side rendering. My components are namespaced (MyApp.ComponentName) and the react_component helper / execjs keeps throwing Prerender errors:
Encountered error "ReferenceError: Can't find variable: MyApp" when prerendering MyApp.DashboardButtons with {}
My server_renderer_options are setup like this:
config.react.server_renderer_options = {
files: ["server_render.js"] # files to load for prerendering
}(I've also tried files: ["react.js", "init.js", "components.js"])
server_render.js looks like this:
//= require react
//= require react_ujs
//= require init
//= require components
init.js looks like this:
window.MyApp = {};
window.MyApp.Mixins = {};
window.MyApp.util = {};(I've also tried self., global., this., etc.)
the component coffee file looks like this:
MyApp.DashboardButtons = React.createClass
displayName: 'DashboardButtons'
render: ->
R.div {}, 'Hello'I'm calling the helper like this: react_component('MyApp.DashboardButtons', {}, {prerender: true})
If I take out the namespace and change it to just @DashboardButtons in the coffee file, it works fine but the rest of my app (which uses the namespace) breaks.
How do I define the namespace so that it's used properly by ExecJS and my components are rendered properly? Any suggestions would be really appreciated.