React-rails: ReferenceError: document is not defined

[TheRusskiy]

Hello guys, I am getting "ReferenceError: document is not defined"
when trying to render my component.
I don't usually create issues but I am starting to pound my head against a wall.
Set up is pretty simple so I can't wrap my head around what went wrong here.
I pushed my test project to Github: https://github.com/TheRusskiy/befluent
Main files:
application.rb: https://github.com/TheRusskiy/befluent/blob/master/config/application.rb
javascripts: https://github.com/TheRusskiy/befluent/tree/master/app/assets/javascripts
view: https://github.com/TheRusskiy/befluent/blob/master/app/views/welcome/index.html.erb

I see that there's another "document is not defined" issue created, but I don't think a guy there has the same problem.
I would really appreciate a new set of eyes on this problem.
Thank you so much in advance!

[rmosolgo]

Thanks for posting a thorough example!

Do you encounter this problem only when prerender: true, only when prerender: false, or both?

I ask because the ExecJS context used for prerendering has no access to document (or any DOM for that matter), so any attempt to access document would fail.

I don't see a reference to document inside Meeting.js.coffee, but I see you're using Browserify for preprocessing your JS. Does browserify insert any references to document? If you're not sure, maybe you could post a copy of the browserified JS bundle.

[TheRusskiy]

Thank you for the prompt response,
only with prerender: true
components.js: https://drive.google.com/file/d/0BzZTV0n454VPYm1meEFSMXJfdm8/view?usp=sharing
There document usages in there but mostly there are wrapped into canUseDOM.
As for those that are not wrapped it's pretty hard to say if they are accessed or not.
Is there a way to get a full stack trace from ExecJS?

[justin808]

I'm getting the same exact issue. I'm trying to make server rendering work with https://github.com/justin808/react-webpack-rails-tutorial/

[brettjurgens]

for what it's worth i did:

var document = typeof document === 'undefined' ? '' : document;

in code that i reference document in and it allowed me to prerender

[alanyjw]

@rmosolgo I've tried the test project posted by @TheRusskiy and it turns out that the problem is caused by this line in react_ujs.js.erb. Removing the dependency on react_ujs.js.erb inside application.js solves the issue.

However, I was wondering if there would be a better solution to this? Perhaps we could remove the reference to document inside react_ujs.js.erb by doing the following:

• Use window.document instead of document.
• Check for existence of window.document before calling functions on it.

[justin808]

I have code in react_on_rails that simply checks if document is defined before doing anything that's client based (as opposed to server rendering based).

Thus, have a conditional before any place you'd need to use document on the server rendering part.

[aflanagan]

I'm server rendering quite a few pages using browserify to bundle my js. I had not run into this issue.

However, when trying to move to a build process using webpack I started hitting this. In my component code (not sure about library code) I don't have anywhere that is referencing document directly.

It seems strange that the code produced by my browserify build would work, but the same code transpiled with webpack isn't. Does anyone have any suggestions for further debugging?

[justin808]

@aflanagan if you want a webpack based solution, take a look at https://github.com/shakacode/react_on_rails/ and the example app: https://github.com/shakacode/react-webpack-rails-tutorial/.

[aflanagan]

@justin808 i've definitely looked at that a few times. :) If this was a new or new-ish project I'd definitely give it a shot, but we're working on a pretty big production app that is slowly being ported to react. We have a setup we're pretty happy with, would just like to solve this one issue with moving to webpack...