prerender: true causes V8::Error - Unexpected token <

[EverybodyKurts]

Hey guys,

Whenever I pass in the prerender: true option to the options hash of a react component, I get the error: V8::Error - Unexpected token <. My component works fine when i remove prerender: true from the options hash.

Gemfile:

gem 'rails', '4.1.1'
gem 'execjs'
gem 'therubyracer', platforms: :ruby
gem 'react-rails', github: 'reactjs/react-rails'

The view:

= react_component("AssignmentWindowProgressBar", { assignment: @assignment_json }, { prerender: true })

Coffee file:

###* @jsx React.DOM ###

@AssignmentWindowProgressBar = React.createClass
  render: ->
    `<div>Hi world.</div>`

# this is located in this file:
# ./apps/assets/javascripts/components/assignments/AssignmentWindows.js.jsx.coffee

Stack trace:

V8::Error - Unexpected token < at <eval>:19037:15:
  therubyracer (0.12.1) lib/v8/error.rb:86:in `block in try'
  therubyracer (0.12.1) lib/v8/error.rb:83:in `try'
  therubyracer (0.12.1) lib/v8/context.rb:95:in `block in eval'
  therubyracer (0.12.1) lib/v8/context.rb:248:in `block (2 levels) in lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:245:in `block in lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:244:in `lock_scope_and_enter'
  therubyracer (0.12.1) lib/v8/context.rb:204:in `enter'
  therubyracer (0.12.1) lib/v8/context.rb:94:in `eval'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:11:in `block in initialize'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:78:in `block in lock'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:76:in `lock'
  execjs (2.2.0) lib/execjs/ruby_racer_runtime.rb:9:in `initialize'
  execjs (2.2.0) lib/execjs/runtime.rb:44:in `compile'
  execjs (2.2.0) lib/execjs/module.rb:27:in `compile'
  ... end of execjs errors ...

Thanks for any and all help guys! Appreciate all the work and effort you all have put in to this great project.

[zpao]

My comment on stack overflow: http://stackoverflow.com/questions/24438996/react-rails-component-with-prerender-true-in-options-hash-gives-a-v8error#comment37857875_24438996

I suspect maybe we have a bug about when we load components.js into the VM. Can anybody test this out?

[johnthethird]

I have set up a Runnable with a sample server rendered component, and it is working on react-rails master with Ruby 1.9.3-p194 and TheRubyRacer gem.

http://runnable.com/U87J_K82JzoNLOzT/react-rails-server-rendering-example-for-reactjs

@KurtRMueller Im not sure this is your problem, but the CS file of yours needs to somehow attach AssignmentWindowProgressBar to the global object (unless you have turned off the protective function wrapper that CS usually uses). In the browser that is window and in V8 it is global. So in my example CS I have at the end of my component definition:

window.FancyBox = FancyBox if window?
global.FancyBox = FancyBox if global?

We need some conventions on how to best do this so everything works on client and server. Im sure nodejs has this figured out, how do they do it?

[jtmalinowski]

AFAIK the standard is to wrap the JS file in one huge immediately invoked function and then pass window or global to it as a scope or whatever argument - based on what is undefined
But we have to decide on one system for DI and embrace it everywhere in react-rails!

The problem here is with coffeescript / (c)jsx compilation not with the global scope - putting on my TODO.

[chellberg]

Is there a workaround for this? I got my global scope issue sorted with components.js and global.Component = Component, but I'm now having this V8::Error. Mine is _ is not defined, which may have something to do with Underscore.js.

Update: I was able to get past that error, but only by requiring the underscore library in components.js. The next errors were related to more libraries referenced in components, and the one I'm stuck on now is Encountered error "ReferenceError: App is not defined" when prerendering...

Are React components supposed to avoid using third party libraries/shared application js code? These components work fine when rendered clientside - is there maybe a better way to give the prerender VM access to the application pipeline javascripts?

[zkilgore]

@chellberg I am getting the exact same V8::Error, only with document is not defined instead of the libraries you are talking about.

Would love to hear if anyone has any insight. Thanks!

[chellberg]

@zkilgore That's one of the ones we ran into - I wanna say it was related to jQuery being unavailable but I'm not 100% sure. The sum of the problems I've encountered makes it seem like the prerenderer is trying to execute the javascript in isolation rather than simulating an actual browser (with a document object, etc) - but then again, I did have to set window.Component = Component to get to this error, so I guess there's at least a window.

[rmosolgo]

I hope this issue was worked out! Server rendering is very different now, please open another issue if you're having a problem with it!