Prerender error - TypeError: Cannot read property 'id' of undefined

[jbhatab]

I'm using jbuilder to serialize my data and just passing it to a really basic react component. I'm really at a loss of what is happening because nothing is undefined and it is getting the right serialized data. This is the error I'm getting.

Encountered error "TypeError: Cannot read property 'id' of undefined" when prerendering ProjectIndexPage with {"projects":[{"id":1,"name":"aweseom","following":false}]}

And here are all the relevant files.

app/views/projects/index.html.slim

= react_component('ProjectIndexPage', render(template: 'projects/index.json.jbuilder'), {prerender: true})

app/views/projects/index.json.jbuilder

json.projects @projects do |project|
  json.id project.id
  json.name project.name
  if current_user
    if current_user.projects.include?(project) then json.following true else json.following false end
  else
    json.following false
  end
end

app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components

app/assets/javascripts/components.js

//= require js-routes

//= require_tree ./policies
//= require_tree ./components

[rmosolgo]

This gets raised when prerendering raises a JavaScript error (https://github.com/reactjs/react-rails/blob/master/lib/react/renderer.rb#L52). It may be some issue related to the component code, do you mind sharing the component source?

[jbhatab]

Great you pointed me in the right direction. So I'm defining current user in the top of my application like this,

- if current_user
      javascript:
        window.currentUser = {
          id : #{current_user.id}
        }

    - else
      javascript:
        window.currentUser = {
          id : null
        }

Now the problem is that react_rails is loading just the components.js file which doesnt have the application page. I know this outside the scope of react-rails, but do you have any suggestions on defining a javascript currentUser from my current_user defined in rails?

[vipulnsward]

@jbhatab where do you use it? If you are using from within react, you can simply pass from react_component props. Else pass it down as data-attribute from some element.

[jbhatab]

Yeah but I'm not using it as a property like that. I'm using it as a global for things like permissions on every page. Maybe I could just set it up to always pass current_user on every page, but I think a global is doable.

[vipulnsward]

Cool. I think we can close this issue in that case.

[jbhatab]

Yeah I'd say so. Any help is appreciated but this isn't a react-rails issue.

[rmosolgo]

@jbhatab yeah, some people have expressed interest in a similar feature.

Right now, the JS instance that performs prerendering has no idea about application state or any data other than things passed to components as props. There's no way to give it any data except via props in the react_component call.

I can see the value of allowing the prerenderer to have access to some other arbitrary data, but personally it's not high on my list. You can see some related conversation in this discussion about isomorphic flux:

#143

[jbhatab]

Ahhh, perfect. Yeah this is all kinda getting figured out in general with all the new libraries and frameworks. I'll check that out. Thanks.