SSR (Server Side Rendering) with Shakapacker

[paul-mesnilgrente]

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.

[paul-mesnilgrente]

Maybe I should ask in another way. Does anyone have SSR working with Shakapacker? If so, could you provide a minimal project showing this?

[Faq]

Did you try with other versions of this gem?
I'm using combo of:
sprockets-rails 3.4.2
dartsass-rails 0.4.0
react-rails 1.9.0

If that is new project where you need this and noone helps to resolve, consider to use different tools. Future where rails is going with assets

[paul-mesnilgrente]

I tried a few variations of what you just gave, but it doesn't work for me :/

Unfortunately, it's not a new project, so using different tools is not an option.

[alkesh26]

@paul-mesnilgrente I will try to reproduce this issue on my local.

[alkesh26]

I was able to reproduce this issue locally. I am still trying to identify the root cause and fix the problem.

[alkesh26]

I will be on leave from today till 16th October. I will debug this once I am back.

[Judahmeek]

@paul-mesnilgrente looks like ReactRailsUJS is undefined since serverRender is one of it's properties.

I suggest adding a log statement right under

react-rails/lib/react/server_rendering/exec_js_renderer.rb

Line 43 in f8148d5

render_function = prerender_options.fetch(:render_function, 'renderToString')

to confirm that & then debugging from there.

[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 #1208.

[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]

@tegandbiscuits Should we release an NPM package with UJS.

For your use case, would react_on_rails work better?

[justin808]

@ahangarha can you take a look?

[ahangarha]

I try to explore this since this is blocking 2.7 release.

[ahangarha]

@justin808 I tried a fresh install with the following versions:

• Rails 7
• React-Rails 2.6.2
• Shakapacker 6.5.4

I get the same error.

[justin808]

This is the main blocking issue for 2.7.

@ahangarha can you add a new Rails 7 app inside of the /spec folder and let’s use that to demonstrate that SSR works.
Like https://github.com/shakacode/react_on_rails/tree/master/spec/dummy.