Closed
Description
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
.
Activity
BookOfGreg commentedon Aug 21, 2018
This is a common error, normally caused by someone trying to include npm packages which only run client-side.
Just tested on a blank rails app with webpack-dev-server running and rendering server-side.

It's possible you have included some JS that is badly behaved and tried to access
Window
when rendering server-side. That package wouldn't run on a normal NodeJS server so it won't run in SSR anyway.What I checked:
Can you provide a more complete reproduction? The gem works when following the start of the Readme in the standard case, so there is information that I'm missing in order to help you.
arminfro commentedon Aug 23, 2018
Reproduction script:
The last five steps needs to be done manually, the lines before can be executed as a shell script and results in the described
ReferenceError: window is not defined
[-]HMR and ServerSide Rendering results in `window is not defined`[/-][+]HMR and Server-Side rendering results in `window is not defined`[/+]BookOfGreg commentedon Aug 23, 2018
Thank you a bunch for the reproduction, that clears it up.
I'll make a guess that HMR is causing SSR to fail, which would make sense as there is no reloading in a serverside world.
We don't currently have the ability to support HMR so I'm unable to help you at this time. It is a desirable feature though.
arminfro commentedon Aug 23, 2018
Thank you for the confirmation ( and for your work on
react-rails
gem ;)My team is just starting to migrate our project to use
react-rails
andwebpacker
, so this is all new to us.As you pointed out it does not make sense to have
HMR
in server rendering mode, but as far as I understand it, this is only true for the first rendering, isn't it?Cause all the
webpack
(andreact
) sources gets send to the client anyway and further renderings will be done on client-side. That brings me to the assumption thatwebpacker
just needs a case for not relying on thewindow
object on first render, which (maybe) means the issue should be addressed inwebpacker
gem, I'm not sure.BookOfGreg commentedon Aug 23, 2018
For now I recommend not using HMR when using SSR in this gem. It's part of the longer-term plan that I would like it to work successfully but I haven't had the time to be able to enable it yet.
It's possible to get them to work together as I'm keeping my eye on the renchap/webpacker-react project as they are working at merging the HMR with SSR in this PR.
It's definitely our project to sort as the upstream webpacker gem does let you use HMR, we just need to be clever about not running the
module.hot
code serverside.arminfro commentedon Aug 23, 2018
Interesting, thanks for the explanation! I'm looking forward to it 😊
andrewscarani commentedon Dec 10, 2019
Is there any way for me to configure react-rails such that it would ignore prerender: true when hmr: true in webpacker.yml? Thus I could turn SSR on/off via the single hmr flag?
gencer commentedon Dec 17, 2019
Interestingly, I have
hmr
set tofalse
. But still face with this issue.gencer commentedon Dec 17, 2019
Well, It is because somewhere in the config i setup jQuery. This was the reason for
window
issue.7 remaining items