HMR and Server-Side rendering results in `window is not defined`

Steps to reproduce

• start webpack-dev-server
• <%= react_component('HelloWorld', { greeting: 'hello' }, prerender: true) %>

webpacker.yml ( diff to default, docker environment )

dev_server:
    host: 0.0.0.0
    public: 0.0.0.0:3035
    hmr: true

Expected behavior

Rendering of page

Actual behavior

ExecJS::ProgramError ReferenceError: window is not defined

System configuration

Sprockets or Webpacker version: 3.12.0 React-Rails version: 2.4.7 Rect_UJS version: 2.4.4 Rails version: 4.2 Ruby version: 2.3

---

When I request the page without server rendering (e.g. <%= react_component('HelloWorld', { greeting: 'ho' }) %>) or when I disable HMR (e.g. hmr: false) it works fine. But leaving it results in described error.

Since there is a fixed issue with the same error in #615 I wonder if I’m missing something obvious? Something like prerender_polyfill.js doesn’t seem to work in my case.

Stack trace beginning from a view file:

/app/javascript/components recursive ^\.\/.*$.map../GoodbyeWorld ((execjs):39:41)
(execjs):762:10
(execjs):34182:14
global ((execjs):1:102)
Object.<anonymous> ((execjs):1:120)
Module._compile (module.js:652:30)
Object.Module._extensions..js (module.js:663:10)
Module.load (module.js:565:32)
tryModuleLoad (module.js:505:12)
Function.Module._load (module.js:497:3)
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 (2.4.7) lib/react/server_rendering/exec_js_renderer.rb:13:in `initialize'
react-rails (2.4.7) lib/react/server_rendering/bundle_renderer.rb:30:in `initialize'
react-rails (2.4.7) lib/react/server_rendering.rb:17:in `new'
react-rails (2.4.7) lib/react/server_rendering.rb:17:in `block in reset_pool'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:171:in `try_create'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:83:in `block (2 levels) in pop'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:79:in `loop'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:79:in `block in pop'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:78:in `synchronize'
connection_pool (2.2.2) lib/connection_pool/timed_stack.rb:78:in `pop'
connection_pool (2.2.2) lib/connection_pool.rb:93:in `checkout'
connection_pool (2.2.2) lib/connection_pool.rb:62:in `block in with'
connection_pool (2.2.2) lib/connection_pool.rb:61:in `handle_interrupt'
connection_pool (2.2.2) lib/connection_pool.rb:61:in `with'
react-rails (2.4.7) lib/react/server_rendering.rb:26:in `render'
react-rails (2.4.7) lib/react/rails/component_mount.rb:67:in `prerender_component'
react-rails (2.4.7) lib/react/rails/component_mount.rb:34:in `block in react_component'
actionview (4.2.10) lib/action_view/helpers/capture_helper.rb:38:in `block in capture'
actionview (4.2.10) lib/action_view/helpers/capture_helper.rb:202:in `with_output_buffer'
haml (5.0.1) lib/haml/helpers/action_view_xss_mods.rb:6:in `with_output_buffer_with_haml_xss'
actionview (4.2.10) lib/action_view/helpers/capture_helper.rb:38:in `capture'
haml (5.0.1) lib/haml/helpers/action_view_mods.rb:47:in `capture_with_haml'
actionview (4.2.10) lib/action_view/helpers/tag_helper.rb:106:in `content_tag'
haml (5.0.1) lib/haml/helpers/action_view_mods.rb:56:in `content_tag_with_haml'
react-rails (2.4.7) lib/react/rails/component_mount.rb:50:in `react_component'
react-rails (2.4.7) lib/react/rails/view_helper.rb:21:in `react_component'
app/helpers/application_helper.rb:389:in `react_component'
app/views/shop_manage/galleries.html.erb:12:in `_app_views_shop_manage_galleries_html_erb__1251111634569882468_205190840'

In case you wonder react_component in application_helper does nothing exciting, just sets instance variable and calls super.

[mariaxtina]

Wanted to follow up and confirm that it’s still not recommended to allow for HMR when using SSR in this gem?

I know @BookOfGreg mentioned it was part of a longer term plan to allow, so just wanted to see if it’s been revisited. Thanks!

[justin808]

I’m facing the same issue with the new version of https://github.com/shakacode/react_on_rails. With the simplest hello_world example that uses the same bundle for both client and server rendering from the running of bin/webpack-dev-server with the default rails/webpacker setup, 5.1.1, server rendering errors out due to references to window.

One cause of this reference to window is that the default globalObject value is “window.” Setting that value to “this” on the server bundle solves that problem. There might be others like this.

I suspect that it makes much more sense to just skip the idea of having the webpack-dev-server produce bundles for SSR.

My solution for React on Rails is to have a separate bundle for SSR and to use bin/webpack --watch. I’m wondering if that solution would work for this gem? I’m not clear on how you could specify a different server bundle from the client bundles in the setup of react-rails.

Also, for hot reloading, react-hot-loader is deprecated. I’m having good luck in using https://github.com/pmmmwh/react-refresh-webpack-plugin. The setup is dead simple. The only tricky part is to make sure this is not included in the server bundle, and if you’re using loadable-components, then you want to have a setup that allows running HMR/hot-reloading without loadable-components.

Just to give full disclosure, I’m the creator of the https://github.com/shakacode/react_on_rails. I’m actively working in this area as my company https://www.shakacode.com/react-on-rails-pro is providing support for the integration of React with Ruby on Rails. That includes support for vanilla rails/webpacker and this gem. For those of you digging into the rails/webpacker part of the webpack config, you might find my RailsConf 2020 talk helpful: Webpacker, It-Just-Works, But How?.