React-rails: Cannot read property 'serverRender' of undefined>" when prerendering

[mattclough1]

Help us help you! Please choose one:

• [x] My app crashes with react-rails, so I've included the stack trace and the exact steps which make it crash.

---

After re-installing today, attempting to server-render my component as a view throws this error (truncated props hash)

Encountered error "#<ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined>" when prerendering Styleguide with { <props obj> } ...

Here's the full stack trace

react-rails (2.0.2) lib/react/server_rendering/exec_js_renderer.rb:22:in `rescue in render'
react-rails (2.0.2) lib/react/server_rendering/exec_js_renderer.rb:17:in `render'
react-rails (2.0.2) lib/react/server_rendering/bundle_renderer.rb:40:in `render'
react-rails (2.0.2) lib/react/server_rendering.rb:27:in `block in render'
connection_pool (2.2.1) lib/connection_pool.rb:64:in `block (2 levels) in with'
connection_pool (2.2.1) lib/connection_pool.rb:63:in `handle_interrupt'
connection_pool (2.2.1) lib/connection_pool.rb:63:in `block in with'
connection_pool (2.2.1) lib/connection_pool.rb:60:in `handle_interrupt'
connection_pool (2.2.1) lib/connection_pool.rb:60:in `with'
react-rails (2.0.2) lib/react/server_rendering.rb:26:in `render'
react-rails (2.0.2) lib/react/rails/component_mount.rb:66:in `prerender_component'
react-rails (2.0.2) lib/react/rails/component_mount.rb:34:in `block in react_component'
actionview (5.0.1) lib/action_view/helpers/capture_helper.rb:39:in `block in capture'
actionview (5.0.1) lib/action_view/helpers/capture_helper.rb:203:in `with_output_buffer'
actionview (5.0.1) lib/action_view/helpers/capture_helper.rb:39:in `capture'
actionview (5.0.1) lib/action_view/helpers/tag_helper.rb:107:in `content_tag'
react-rails (2.0.2) lib/react/rails/component_mount.rb:49:in `react_component'
react-rails (2.0.2) lib/react/rails/view_helper.rb:21:in `react_component'
react-rails (2.0.2) lib/react/rails/controller_renderer.rb:32:in `call'
react-rails (2.0.2) lib/react/rails/railtie.rb:64:in `block (2 levels) in <class:Railtie>'
actionpack (5.0.1) lib/action_controller/metal/renderers.rb:150:in `block in _render_to_body_with_renderer'
/Users/mattclough/.rbenv/versions/2.3.0/lib/ruby/2.3.0/set.rb:306:in `each_key'
/Users/mattclough/.rbenv/versions/2.3.0/lib/ruby/2.3.0/set.rb:306:in `each'
actionpack (5.0.1) lib/action_controller/metal/renderers.rb:146:in `_render_to_body_with_renderer'
actionpack (5.0.1) lib/action_controller/metal/renderers.rb:142:in `render_to_body'
actionpack (5.0.1) lib/abstract_controller/rendering.rb:26:in `render'
actionpack (5.0.1) lib/action_controller/metal/rendering.rb:36:in `render'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:44:in `block (2 levels) in render'
activesupport (5.0.1) lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
/Users/mattclough/.rbenv/versions/2.3.0/lib/ruby/2.3.0/benchmark.rb:308:in `realtime'
activesupport (5.0.1) lib/active_support/core_ext/benchmark.rb:12:in `ms'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:44:in `block in render'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:87:in `cleanup_view_runtime'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:43:in `render'
app/controllers/pages_controller.rb:59:in `admin_styleguide'
actionpack (5.0.1) lib/action_controller/metal/basic_implicit_render.rb:4:in `send_action'
actionpack (5.0.1) lib/abstract_controller/base.rb:188:in `process_action'
actionpack (5.0.1) lib/action_controller/metal/rendering.rb:30:in `process_action'
actionpack (5.0.1) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
activesupport (5.0.1) lib/active_support/callbacks.rb:126:in `call'
activesupport (5.0.1) lib/active_support/callbacks.rb:506:in `block (2 levels) in compile'
activesupport (5.0.1) lib/active_support/callbacks.rb:455:in `call'
activesupport (5.0.1) lib/active_support/callbacks.rb:448:in `block (2 levels) in around'
activesupport (5.0.1) lib/active_support/callbacks.rb:286:in `block (2 levels) in halting'
react-rails (2.0.2) lib/react/rails/controller_lifecycle.rb:31:in `use_react_component_helper'
activesupport (5.0.1) lib/active_support/callbacks.rb:382:in `block in make_lambda'
activesupport (5.0.1) lib/active_support/callbacks.rb:285:in `block in halting'
activesupport (5.0.1) lib/active_support/callbacks.rb:447:in `block in around'
activesupport (5.0.1) lib/active_support/callbacks.rb:455:in `call'
activesupport (5.0.1) lib/active_support/callbacks.rb:101:in `__run_callbacks__'
activesupport (5.0.1) lib/active_support/callbacks.rb:750:in `_run_process_action_callbacks'
activesupport (5.0.1) lib/active_support/callbacks.rb:90:in `run_callbacks'
actionpack (5.0.1) lib/abstract_controller/callbacks.rb:19:in `process_action'
actionpack (5.0.1) lib/action_controller/metal/rescue.rb:20:in `process_action'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
activesupport (5.0.1) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (5.0.1) lib/active_support/notifications/instrumenter.rb:21:in `instrument'
activesupport (5.0.1) lib/active_support/notifications.rb:164:in `instrument'
actionpack (5.0.1) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
actionpack (5.0.1) lib/action_controller/metal/params_wrapper.rb:248:in `process_action'
actionpack (5.0.1) lib/abstract_controller/base.rb:126:in `process'
actionview (5.0.1) lib/action_view/rendering.rb:30:in `process'
actionpack (5.0.1) lib/action_controller/metal.rb:190:in `dispatch'
actionpack (5.0.1) lib/action_controller/metal.rb:262:in `dispatch'
actionpack (5.0.1) lib/action_dispatch/routing/route_set.rb:50:in `dispatch'
actionpack (5.0.1) lib/action_dispatch/routing/route_set.rb:32:in `serve'
actionpack (5.0.1) lib/action_dispatch/journey/router.rb:39:in `block in serve'
actionpack (5.0.1) lib/action_dispatch/journey/router.rb:26:in `each'
actionpack (5.0.1) lib/action_dispatch/journey/router.rb:26:in `serve'
actionpack (5.0.1) lib/action_dispatch/routing/route_set.rb:725:in `call'
warden (1.2.7) lib/warden/manager.rb:36:in `block in call'
warden (1.2.7) lib/warden/manager.rb:35:in `catch'
warden (1.2.7) lib/warden/manager.rb:35:in `call'
rack (2.0.1) lib/rack/etag.rb:25:in `call'
rack (2.0.1) lib/rack/conditional_get.rb:25:in `call'
rack (2.0.1) lib/rack/head.rb:12:in `call'
rack (2.0.1) lib/rack/session/abstract/id.rb:222:in `context'
rack (2.0.1) lib/rack/session/abstract/id.rb:216:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/cookies.rb:613:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/callbacks.rb:38:in `block in call'
activesupport (5.0.1) lib/active_support/callbacks.rb:97:in `__run_callbacks__'
activesupport (5.0.1) lib/active_support/callbacks.rb:750:in `_run_call_callbacks'
activesupport (5.0.1) lib/active_support/callbacks.rb:90:in `run_callbacks'
actionpack (5.0.1) lib/action_dispatch/middleware/callbacks.rb:36:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/debug_exceptions.rb:49:in `call'
web-console (3.4.0) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.4.0) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.4.0) lib/web_console/middleware.rb:18:in `catch'
web-console (3.4.0) lib/web_console/middleware.rb:18:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.0.1) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.0.1) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.0.1) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.0.1) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.0.1) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.0.1) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.0) lib/sprockets/rails/quiet_assets.rb:13:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/request_id.rb:24:in `call'
rack (2.0.1) lib/rack/method_override.rb:22:in `call'
rack (2.0.1) lib/rack/runtime.rb:22:in `call'
activesupport (5.0.1) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.0.1) lib/action_dispatch/middleware/static.rb:136:in `call'
rack (2.0.1) lib/rack/sendfile.rb:111:in `call'
railties (5.0.1) lib/rails/engine.rb:522:in `call'
puma (3.7.0) lib/puma/configuration.rb:226:in `call'
puma (3.7.0) lib/puma/server.rb:578:in `handle_request'
puma (3.7.0) lib/puma/server.rb:415:in `process_client'
puma (3.7.0) lib/puma/server.rb:275:in `block in run'
puma (3.7.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'

downgrading to 1.11.0 fixes the issue

[mattclough1]

Just noticed that the readme updated for server rendering. I'll reconfigure and make sure this is actually an issue. My apologies!

[rmosolgo]

Thanks, if you find you still have a problem, please let me know a little about your setup:

• Webpacker or sprockets?
• How are you loading react_ujs?
• What's your ExecJS backend? (For example, are you using therubyracer, mini_racer, or anything else? If you're not sure and you don't mind sharing your Gemfile.lock, that's an easy way to check.)

Just reopen this and I'd be happy to help track it down! As you noticed I just made a big refactor here so there might be a bug 😬

[pioz]

I've same problem after upgrade from react-rails 1.10 to 2.1.0
Im using sprockets, in my server_rendering.js I've put //= require react_ujs, my ExecJS backend is mini_racer.

@mattclough1 what were your changes to fixing the problem?

[rmosolgo]

in my server_rendering.js I've put //= require react_ujs

Did you also use //= require ... to include your components and their dependencies?

[pioz]

My server_rendering.js:

//= require namespace
//= require i18n
//= require i18n/translations
//= require underscore/underscore
//= require inflections/lib/inflections
//= require underscore.string/dist/underscore.string
//= require numeral/numeral
//= require react_ujs

//= require es6_require

//= require react-server
//= require react-router/umd/ReactRouter
//= require ./components_priority_require
//= require_tree ./components/server
//= require_tree ./components/common

[rmosolgo]

Well, that looks pretty much right! What about one thing:

I think react_ujs depends on React, how about moving //= require react-server above the UJS? For example:

//= require react-server 
//= require react_ujs

If that doesn't help, could you share the _full_ error message you're seeing, just so we can be sure it's an exact match?

Also, do you have any settings for config.react in your configuration? If so, could you share them?

[pioz]

It works! Just put react_ujs after react-server require. Thank you very much!

[mattclough1]

Oddly, everything I had before could stay roughly the same, I just needed to add

//= require react-server
//= require react-ujs

to the top of the components file, as well as requiring react and react-ujs in application.js 👍

[mikecmpbll]

to help anyone searching, the error i was getting was:

TypeError: Cannot call method 'serverRender' of undefined

just ran the rails g react:install script and was good to go again :).

[christiangenco]

rails g react:install is what did it for me. Maybe this should be added to the upgrade instructions in the README?

[BookOfGreg]

Hi @christiangenco,
There is at least one instruction in reactjs/react-rails/blob/master/README.md#get-started-with-webpacker which is near top. When would you use it during upgrade? Would welcome a PR for doc changes if it helps people, thanks :)