Errors on prerender

[rkichenama]

I have a rails app that I am attempting to use server render react components with. I am able to use the react_component helper in all cases except prerender, where I get TypeError: Cannot read property 'createElement' of undefined

I have installed the latest react-rails gem, configured the application

config.react.server_renderer_pool_size  ||= 1
config.react.server_renderer_timeout    ||= 20
config.react.server_renderer = React::ServerRendering::SprocketsRenderer
config.react.server_renderer_options = {
      files: ["react-server.js", "components.js"],
      replay_console: true,
}

set up components.js to point to all my component folders. when I {:prerender => true} it breaks.

full trace below

assert ((execjs):34536:20)
(execjs):36258:24
(execjs):36309:3
deletedIds ((execjs):33630:3)
(execjs):33634:2
(execjs):73853:14
global ((execjs):1:102)
Object.<anonymous> ((execjs):1:120)
Module._compile (module.js:541:32)
Object.Module._extensions..js (module.js:550:10)
execjs (2.7.0) lib/execjs/external_runtime.rb:39:in `exec'
execjs (2.7.0) lib/execjs/external_runtime.rb:14:in `initialize'
execjs (2.7.0) lib/execjs/runtime.rb:57:in `new'
execjs (2.7.0) lib/execjs/runtime.rb:57:in `compile'
execjs (2.7.0) lib/execjs/module.rb:27:in `compile'
react-rails (1.7.1) lib/react/server_rendering/exec_js_renderer.rb:10:in `initialize'
react-rails (1.7.1) lib/react/server_rendering/sprockets_renderer.rb:25:in `initialize'
react-rails (1.7.1) lib/react/server_rendering.rb:22:in `new'
react-rails (1.7.1) lib/react/server_rendering.rb:22:in `create_renderer'
react-rails (1.7.1) lib/react/server_rendering.rb:12:in `block in reset_pool'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:169:in `call'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:169:in `try_create'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:81:in `block (2 levels) in pop'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:77:in `loop'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:77:in `block in pop'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:76:in `synchronize'
connection_pool (2.2.0) lib/connection_pool/timed_stack.rb:76:in `pop'
connection_pool (2.2.0) lib/connection_pool.rb:89:in `checkout'
connection_pool (2.2.0) lib/connection_pool.rb:61:in `block in with'
connection_pool (2.2.0) lib/connection_pool.rb:60:in `handle_interrupt'
connection_pool (2.2.0) lib/connection_pool.rb:60:in `with'
react-rails (1.7.1) lib/react/server_rendering.rb:16:in `render'
react-rails (1.7.1) lib/react/rails/component_mount.rb:31:in `block in react_component'
actionview (4.2.5) lib/action_view/helpers/capture_helper.rb:38:in `block in capture'
actionview (4.2.5) lib/action_view/helpers/capture_helper.rb:202:in `with_output_buffer'
actionview (4.2.5) lib/action_view/helpers/capture_helper.rb:38:in `capture'
actionview (4.2.5) lib/action_view/helpers/tag_helper.rb:106:in `content_tag'
react-rails (1.7.1) lib/react/rails/component_mount.rb:46:in `react_component'
react-rails (1.7.1) lib/react/rails/view_helper.rb:21:in `react_component'
app/views/lite/report.html.erb:14:in `_app_views_lite_report_html_erb___1675091392396793697_70189844685300'
actionview (4.2.5) lib/action_view/template.rb:145:in `block in render'
activesupport (4.2.5) lib/active_support/notifications.rb:166:in `instrument'
actionview (4.2.5) lib/action_view/template.rb:333:in `instrument'
actionview (4.2.5) lib/action_view/template.rb:143:in `render'
actionview (4.2.5) lib/action_view/renderer/template_renderer.rb:54:in `block (2 levels) in render_template'
actionview (4.2.5) lib/action_view/renderer/abstract_renderer.rb:39:in `block in instrument'
activesupport (4.2.5) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (4.2.5) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
activesupport (4.2.5) lib/active_support/notifications.rb:164:in `instrument'
actionview (4.2.5) lib/action_view/renderer/abstract_renderer.rb:39:in `instrument'
actionview (4.2.5) lib/action_view/renderer/template_renderer.rb:53:in `block in render_template'
actionview (4.2.5) lib/action_view/renderer/template_renderer.rb:61:in `render_with_layout'
actionview (4.2.5) lib/action_view/renderer/template_renderer.rb:52:in `render_template'
actionview (4.2.5) lib/action_view/renderer/template_renderer.rb:14:in `render'
actionview (4.2.5) lib/action_view/renderer/renderer.rb:42:in `render_template'
actionview (4.2.5) lib/action_view/renderer/renderer.rb:23:in `render'
actionview (4.2.5) lib/action_view/rendering.rb:100:in `_render_template'
actionpack (4.2.5) lib/action_controller/metal/streaming.rb:217:in `_render_template'
actionview (4.2.5) lib/action_view/rendering.rb:83:in `render_to_body'
actionpack (4.2.5) lib/action_controller/metal/rendering.rb:32:in `render_to_body'
actionpack (4.2.5) lib/action_controller/metal/renderers.rb:37:in `render_to_body'
actionpack (4.2.5) lib/abstract_controller/rendering.rb:25:in `render'
actionpack (4.2.5) lib/action_controller/metal/rendering.rb:16:in `render'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:44:in `block (2 levels) in render'
activesupport (4.2.5) lib/active_support/core_ext/benchmark.rb:12:in `block in ms'
/Users/richard.kichenama/.rvm/rubies/ruby-2.2.4/lib/ruby/2.2.0/benchmark.rb:303:in `realtime'
activesupport (4.2.5) lib/active_support/core_ext/benchmark.rb:12:in `ms'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:44:in `block in render'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:87:in `cleanup_view_runtime'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:43:in `render'
wicked_pdf (1.0.6) lib/wicked_pdf/pdf_helper.rb:22:in `render_with_wicked_pdf'
actionpack (4.2.5) lib/action_controller/metal/mime_responds.rb:217:in `respond_to'
app/controllers/lite_controller.rb:14:in `report'
actionpack (4.2.5) lib/action_controller/metal/implicit_render.rb:4:in `send_action'
actionpack (4.2.5) lib/abstract_controller/base.rb:198:in `process_action'
actionpack (4.2.5) lib/action_controller/metal/rendering.rb:10:in `process_action'
actionpack (4.2.5) lib/abstract_controller/callbacks.rb:20:in `block in process_action'
activesupport (4.2.5) lib/active_support/callbacks.rb:117:in `call'
activesupport (4.2.5) lib/active_support/callbacks.rb:117:in `call'
activesupport (4.2.5) lib/active_support/callbacks.rb:555:in `block (2 levels) in compile'
activesupport (4.2.5) lib/active_support/callbacks.rb:505:in `call'
activesupport (4.2.5) lib/active_support/callbacks.rb:505:in `call'
activesupport (4.2.5) lib/active_support/callbacks.rb:92:in `__run_callbacks__'
activesupport (4.2.5) lib/active_support/callbacks.rb:778:in `_run_process_action_callbacks'
activesupport (4.2.5) lib/active_support/callbacks.rb:81:in `run_callbacks'
actionpack (4.2.5) lib/abstract_controller/callbacks.rb:19:in `process_action'
actionpack (4.2.5) lib/action_controller/metal/rescue.rb:29:in `process_action'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:32:in `block in process_action'
activesupport (4.2.5) lib/active_support/notifications.rb:164:in `block in instrument'
activesupport (4.2.5) lib/active_support/notifications/instrumenter.rb:20:in `instrument'
activesupport (4.2.5) lib/active_support/notifications.rb:164:in `instrument'
actionpack (4.2.5) lib/action_controller/metal/instrumentation.rb:30:in `process_action'
actionpack (4.2.5) lib/action_controller/metal/params_wrapper.rb:250:in `process_action'
actionpack (4.2.5) lib/abstract_controller/base.rb:137:in `process'
actionview (4.2.5) lib/action_view/rendering.rb:30:in `process'
actionpack (4.2.5) lib/action_controller/metal.rb:196:in `dispatch'
actionpack (4.2.5) lib/action_controller/metal/rack_delegation.rb:13:in `dispatch'
actionpack (4.2.5) lib/action_controller/metal.rb:237:in `block in action'
actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:76:in `call'
actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:76:in `dispatch'
actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:45:in `serve'
actionpack (4.2.5) lib/action_dispatch/journey/router.rb:43:in `block in serve'
actionpack (4.2.5) lib/action_dispatch/journey/router.rb:30:in `each'
actionpack (4.2.5) lib/action_dispatch/journey/router.rb:30:in `serve'
actionpack (4.2.5) lib/action_dispatch/routing/route_set.rb:817:in `call'
rack (1.6.4) lib/rack/etag.rb:24:in `call'
rack (1.6.4) lib/rack/conditionalget.rb:25:in `call'
rack (1.6.4) lib/rack/head.rb:13:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/params_parser.rb:27:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/flash.rb:260:in `call'
rack (1.6.4) lib/rack/session/abstract/id.rb:225:in `context'
rack (1.6.4) lib/rack/session/abstract/id.rb:220:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/cookies.rb:560:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/callbacks.rb:29:in `block in call'
activesupport (4.2.5) lib/active_support/callbacks.rb:88:in `__run_callbacks__'
activesupport (4.2.5) lib/active_support/callbacks.rb:778:in `_run_call_callbacks'
activesupport (4.2.5) lib/active_support/callbacks.rb:81:in `run_callbacks'
actionpack (4.2.5) lib/action_dispatch/middleware/callbacks.rb:27:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/reloader.rb:73:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/remote_ip.rb:78:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/debug_exceptions.rb:17:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
railties (4.2.5) lib/rails/rack/logger.rb:38:in `call_app'
railties (4.2.5) lib/rails/rack/logger.rb:20:in `block in call'
activesupport (4.2.5) lib/active_support/tagged_logging.rb:68:in `block in tagged'
activesupport (4.2.5) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (4.2.5) lib/active_support/tagged_logging.rb:68:in `tagged'
railties (4.2.5) lib/rails/rack/logger.rb:20:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/request_id.rb:21:in `call'
rack (1.6.4) lib/rack/methodoverride.rb:22:in `call'
rack (1.6.4) lib/rack/runtime.rb:18:in `call'
activesupport (4.2.5) lib/active_support/cache/strategy/local_cache_middleware.rb:28:in `call'
rack (1.6.4) lib/rack/lock.rb:17:in `call'
actionpack (4.2.5) lib/action_dispatch/middleware/static.rb:116:in `call'
rack (1.6.4) lib/rack/sendfile.rb:113:in `call'
sentry-raven (1.0.0) lib/raven/integrations/rack.rb:53:in `call'
railties (4.2.5) lib/rails/engine.rb:518:in `call'
railties (4.2.5) lib/rails/application.rb:165:in `call'
rack (1.6.4) lib/rack/content_length.rb:15:in `call'
thin (1.6.4) lib/thin/connection.rb:86:in `block in pre_process'
thin (1.6.4) lib/thin/connection.rb:84:in `catch'
thin (1.6.4) lib/thin/connection.rb:84:in `pre_process'
thin (1.6.4) lib/thin/connection.rb:53:in `process'
thin (1.6.4) lib/thin/connection.rb:39:in `receive_data'
eventmachine (1.0.9.1) lib/eventmachine.rb:193:in `run_machine'
eventmachine (1.0.9.1) lib/eventmachine.rb:193:in `run'
thin (1.6.4) lib/thin/backends/base.rb:73:in `start'
thin (1.6.4) lib/thin/server.rb:162:in `start'
rack (1.6.4) lib/rack/handler/thin.rb:19:in `run'
rack (1.6.4) lib/rack/server.rb:286:in `start'
railties (4.2.5) lib/rails/commands/server.rb:80:in `start'
railties (4.2.5) lib/rails/commands/commands_tasks.rb:80:in `block in server'
railties (4.2.5) lib/rails/commands/commands_tasks.rb:75:in `tap'
railties (4.2.5) lib/rails/commands/commands_tasks.rb:75:in `server'
railties (4.2.5) lib/rails/commands/commands_tasks.rb:39:in `run_command!'
railties (4.2.5) lib/rails/commands.rb:17:in `<top (required)>'
bin/rails:4:in `require'
bin/rails:4:in `<main>'

[rmosolgo]

It's trying to call React.createElement, right? But React isn't defined ... hmm. Just to be sure, did you restart your development Rails server after changing application.rb? (That file isn't live-reloaded by Rails)

[rkichenama]

Yes, I restarted my dev server after changing applicaiton.rb

After a while, I get the same error ActionView::Template::Error (TypeError: Cannot read property 'createElement' of undefined)

[rmosolgo]

Very strange that this is happening during #initialize (seen from this line: react-rails (1.7.1) lib/react/server_rendering/exec_js_renderer.rb:10:in 'initialize').

That means that this error is happening when the files are first loaded.

Usually, React.createElement isn't called until the JS files are completely loaded, then you render a component.

Are you using JSX outside of component definition render functions? For example, something like

ReactDOM.render(<Something />, targetElement)

? Hmmm... but even then... why would React be undefined?

Anyhow, I think there's something going wrong while it loads components.js. It's hard to tell what is going wrong, since the stack trace doesn't include JS code.

The best suggestion I can make is "bisect" to find the error: Remove half of the //= require directives from components.js and see if it still happens. If it still happens, remove another half of the //= require directives. If it doesn't happen, remove the ones that are there and put back the ones you removed (to search the other half of the directives). Eventually, you'll be able to find which file is triggering this bug.

If you remove all the //= requires and it still happens, it must be a bug in react-server!

Or, if you can share your components.js and the files which it requires, I could take a quick look!

[rkichenama]

I am writing my components in jsx files, most of which use the es6 syntax; they are being transpiled correctly. Working through the components.js file, I have removed assumed dependencies and added d3.min to the list of files needed to precompile. The error has changed to TypeError: Super expression must either be null or a function, not undefined stemming from my BaseComponent inheriting from React.Component

It would seem that loading d3, react-server, and components does not expose a global React for the instances of the components.

components.js

//= require_self
//= require components/BaseComponent
//= require_tree ./components
//= require_tree ./layouts
//= require_tree ./adapters
//= require_tree ./lib
//= require_tree ./utils
//= require _cloropathData

the last file being semi-static data used by most of the components

[rkichenama]

will all the changes, I revert to attempt to load a stateless component server side and get the createElement ReferenceError.

[rkichenama]

@rmosolgo I am attempting the workaround you proposed in #443

Now I get NotSupportedError: This operation is not supported

execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:15:in `rescue in block in initialize'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:12:in `block in initialize'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:75:in `block in lock'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:73:in `call'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:73:in `Locker'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:73:in `lock'
execjs (2.7.0) lib/execjs/ruby_racer_runtime.rb:9:in `initialize'
execjs (2.7.0) lib/execjs/runtime.rb:57:in `new'
execjs (2.7.0) lib/execjs/runtime.rb:57:in `compile'
execjs (2.7.0) lib/execjs/module.rb:27:in `compile'
react-rails (1.7.1) lib/react/server_rendering/exec_js_renderer.rb:10:in `initialize'
react-rails (1.7.1) lib/react/server_rendering/sprockets_renderer.rb:25:in `initialize'
react-rails (1.7.1) lib/react/server_rendering.rb:22:in `new'
react-rails (1.7.1) lib/react/server_rendering.rb:22:in `create_renderer'
react-rails (1.7.1) lib/react/server_rendering.rb:12:in `block in reset_pool'

[franciscoGPS]

Any update here?

[BookOfGreg]

@franciscoGPS do you have any details or reproduction steps. I was going to close the issue as it's old but your comment is more recent.
Can try help and reopen if you have more details.