Prerender fails with document is not defined

[pezwilson]

Hello, I've been digging around and trying stuff for hours, but prerender is not working for me.

Using: react-rails 1.0.0 rails 4.1.9 ruby 2.2.2

Like others react_component works fine without prerender, but fails with.

I don't have any js dependencies (that I know of! :), I've tried all of the variations of calling the component (regarding global scope) and always the same result:

ReferenceError: document is not defined or like this in log:

ActionView::Template::Error (ReferenceError: document is not defined):

application.js:

//= require jquery
//= require jquery_ujs
//= require jquery.Jcrop
//= require jquery-ui/datepicker
//= require turbolinks
//= require es5-shim/es5-shim
//= require react
//= require react_ujs
//= require components
//= require bootstrap-sprockets
//= require modernizr
//= require holder
//= require_tree .

components.js

//= require_tree ./components

I've tried using a server-side.js file that looks like this, but same result:

//= require react
//= require_tree ./components

My current component code looks like this:

TestComponent = React.createClass({
  render: function() {
    console.log('here');
    return (
      <div>Hello</div>
    );
  }
});
window.TestComponent = TestComponent;

I've tried that with var in front like my other standard React components, etc... all of the various ways I can get it into global scope, but I think that isn't the issue. It doesn't reach the console.log and simply can't find the document.

Any ideas? React is awesome! Just want to get this working since it will make a portion of my app more slick.

Thanks

ps I also tried restarting my server after making any changes to components.js, etc.

[rmosolgo]

Are there any components in components/ that reference jQuery? Unfortunately jQuery (and consequently, many jQuery plugins) don't work with prerender: true because the server-side JavaScript environment doesn't have a DOM.

What do you think, are there any components in components/ that reference jQuery (or another document-dependent library) at load-time?

[pezwilson]

Thanks for your comment! I figured out what I was doing wrong. Yes, all works perfectly. I wasn't seeing something obvious in my other React files in terms of how I was invoking some components. Newbie stuff :)

[pezwilson]

Just an update for anyone else that gets confused: I'm using js.jsx files and didn't need to do anything to address global scope to get prerender to work at least for the version I'm using. Don't worry about that (I guess unless you're using coffee per the docs). I went down a long road trying to address that which had nothing to do with the actual problem I was having. (That never happens!!! :)