SSR (Server Side Rendering) with Shakapacker

Steps to reproduce

1. Clone this repo: https://github.com/paul-mesnilgrente/shakapacker-with-react-rails
2. yarn and bundle install
3. bin/rails server and bin/webpacker-dev-server
4. Go to localhost:3000 and see the error

Expected behavior

I expect the app to show a nice “Hello Gus!”

Actual behavior

The page errors

System configuration

Shakapacker version: 6.5.0 React-Rails version: 2.6.2 Rect_UJS version: 2.6.2 Rails version: 7.0.3.1 Ruby version:3.0.3

---

1. I created a brand new repo
2. Added Shakapacker and followed its installation steps
3. Added the react-rails gem
4. Re-created the install steps of react-rails on this test repo
5. Got a working version of a component working without SSR
6. Turned on SSR and it failed with

React::ServerRendering::PrerenderError in Homes#index 

Encountered error "#<ExecJS::ProgramError: TypeError: Cannot read properties of undefined (reading 'serverRender')>" when prerendering HelloWorld with {"name":"Gus!"}
...
Object.<anonymous> ((execjs):1:58)
Module._compile (node:internal/modules/cjs/loader:1103:14)
Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
Module.load (node:internal/modules/cjs/loader:981:32)
Function.Module._load (node:internal/modules/cjs/loader:822:12)
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:39:in `exec'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/execjs-2.8.1/lib/execjs/external_runtime.rb:21:in `eval'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/server_rendering/exec_js_renderer.rb:39:in `render_from_parts'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/server_rendering/exec_js_renderer.rb:20:in `render'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/server_rendering/bundle_renderer.rb:40:in `render'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/server_rendering.rb:27:in `block in render'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/connection_pool-2.2.5/lib/connection_pool.rb:63:in `block (2 levels) in with'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/connection_pool-2.2.5/lib/connection_pool.rb:62:in `handle_interrupt'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/connection_pool-2.2.5/lib/connection_pool.rb:62:in `block in with'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/connection_pool-2.2.5/lib/connection_pool.rb:59:in `handle_interrupt'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/connection_pool-2.2.5/lib/connection_pool.rb:59:in `with'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/server_rendering.rb:26:in `render'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/rails/component_mount.rb:74:in `prerender_component'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/rails/component_mount.rb:38:in `block in react_component'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/actionview-7.0.3.1/lib/action_view/helpers/capture_helper.rb:45:in `block in capture'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/actionview-7.0.3.1/lib/action_view/helpers/capture_helper.rb:209:in `with_output_buffer'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/actionview-7.0.3.1/lib/action_view/helpers/capture_helper.rb:45:in `capture'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/actionview-7.0.3.1/lib/action_view/helpers/tag_helper.rb:371:in `content_tag'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/rails/component_mount.rb:57:in `react_component'
/home/paul/.rbenv/versions/3.0.3/lib/ruby/gems/3.0.0/gems/react-rails-2.6.2/lib/react/rails/view_helper.rb:21:in `react_component'
/home/paul/Dev/shakapacker-test/app/views/homes/index.html.erb:6:in `_app_views_homes_index_html_erb__1592835306549513420_20900'

You can test this with the repo mentioned above. Do you know what’s wrong? The error doesn’t leave a lot of clues.

[tegandbiscuits]

I don’t know if this will be any help, but I’m currently trying to switch a project from Webpacker to just Webpack, and getting the same error in this issue.

I wouldn’t be surprised if this isn’t (or isn’t going to be) supported, but I’m just chiming in in case it’s a matter of the output not being the same.

Echoing what was said earlier, it appears that ReactRailsUJS isn’t defined when the ExecJS renderer runs stuff. If I throw the output from server_rendering.js in a console, then this.ReactRailsUJS exists, but doesn’t seem to exist on this in the renderer.

[justin808]

@Judahmeek and @alkesh26, and @ahangarha, I caution about spending too much time on this sample repo, as it’s likely a configuration issue with the old version

We should try a fresh install of the react-rails master branch with the latest Shakapacker and other dependencies and confirm that SSR works.

@paul-mesnilgrente can you try my suggestions ^^^?

Also, I encourage you to join our slack

@BookOfGreg it would really help if I can release a beta version ASAP! See https://github.com/reactjs/react-rails/issues/1208.