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 https://github.com/reactjs/react-rails/blob/f8148d57a6d96b27bddfaef9f9bf26e233b27bd6/lib/react/server_rendering/exec_js_renderer.rb#L43 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 https://github.com/reactjs/react-rails/issues/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.

[ahangarha]

@justin808 I have tried this here but didn't get any success.

[Judahmeek]

@justin808 I have tried this here but didn't get any success.

SSR works now in that repo with my changes, which incorporate #1252 as well

[antoine-khawa]

@Judahmeek I still have the error using the dummy app, as well as on my other app (using #1252 ).

[Judahmeek]

@Judahmeek I still have the error using the dummy app, as well as on my other app (using #1252 ).

What error?

You'll have to provide specifics of what you did & what error you're getting.

[antoine-khawa]

@Judahmeek I still have the error using the dummy app, as well as on my other app (using #1252 ).

What error?

You'll have to provide specifics of what you did & what error you're getting.

The error I am getting using this branch is :

Processing by HomeController#index as HTML
  Rendering layout layouts/application.html.erb
  Rendering home/index.html.erb within layouts/application
  Rendered home/index.html.erb within layouts/application (Duration: 0.9ms | Allocations: 2312)
  Rendered layout layouts/application.html.erb (Duration: 1.0ms | Allocations: 2386)
Completed 500 Internal Server Error in 9ms (ActiveRecord: 0.0ms | Allocations: 7167)


  
ActionView::Template::Error (No such file or directory @ rb_sysopen - /home/my/code/react-rails-with-shakapacker-for-ssr/public/packs/server_rendering.js):
    1: <h1>Home#index</h1>
    2: <p>Find me in app/views/home/index.html.erb</p>
    3: 
    4: <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, { prerender: true }) %>
  

[andrisole92]

Having the same error

[ahangarha]

~I confirm the issue with~

• ~react-rails 3.1.1~
• ~shakapacker 7.0.3~

~Maybe better to open a new issue since this issue is not the same as before.~

@andrisole92

Please check out SSR section in the documentation:

Requires separate compilations for server & client bundles (see Webpack config)

Please follow the documentation and confirm the fix.

If you are just starting to use react-rails, take a look at react_on_rails which offer more features.