Error related to server_rendering.js not found with SSR

[mdesantis]

Steps to reproduce

1. Follow the Get Started guide
2. Try to perform SSR with the hello world component:

• bin/rails g controller HelloWorld index
• put <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, { prerender: true }) %> inside the related view

Expected behavior

Servers-side rendering should happen I guess

Actual behavior

I get the following error:

ActionView::Template::Error (No such file or directory @ rb_sysopen - /react_rails_demo_2/public/packs/server_rendering.js):
    1: <h1>HelloWorld#index</h1>
    2: <%= react_component("HelloWorld", { greeting: "Hello from react-rails." }, { prerender: true }) %>

System configuration

• Shakapacker or Sprockets version: 7.1.0
• React-Rails version: 3.1.1
• Rect_UJS version: n.a.
• Rails version: 7.1.2
• Ruby version: 3.2.2

---

Can't perform SSR, even with a brand new Rails application 😕

[mdesantis]

I could fix it creating an initializer with this contents:

class MyAssetContainer
  def find_asset(filename)
    asset_path = Shakapacker.config.public_output_path.join('js', filename).to_s
    File.read(asset_path)
  end
end

React::ServerRendering::BundleRenderer.asset_container_class = MyAssetContainer

But now I get another error, unfortunately not as trivial as the previous one:

React::ServerRendering::PrerenderError in HelloWorld#hello_world_1

Showing /app/views/hello_world/hello_world_1.html.erb where line #2 raised:

Encountered error "#<ExecJS::ProgramError: TypeError: Cannot read properties of undefined (reading 'serverRender')>" when prerendering HelloWorld with {"greeting":"Hello from react-rails."}
eval (eval at <anonymous> ((execjs):116:8), <anonymous>:6:45)
eval (eval at <anonymous> ((execjs):116:8), <anonymous>:18:13)
(execjs):116:8
(execjs):134:14
(execjs):1:32
Object.<anonymous> ((execjs):1:50)
Module._compile (node:internal/modules/cjs/loader:1256:14)
Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
Module.load (node:internal/modules/cjs/loader:1119:32)
Module._load (node:internal/modules/cjs/loader:960:12)
/gems/execjs-2.9.1/lib/execjs/external_runtime.rb:40:in `exec'
/gems/execjs-2.9.1/lib/execjs/external_runtime.rb:22:in `eval'
/gems/react-rails-3.1.1/lib/react/server_rendering/exec_js_renderer.rb:48:in `render_from_parts'
/gems/react-rails-3.1.1/lib/react/server_rendering/exec_js_renderer.rb:24:in `render'
/gems/react-rails-3.1.1/lib/react/server_rendering/bundle_renderer.rb:42:in `render'
/gems/react-rails-3.1.1/lib/react/server_rendering.rb:29:in `block in render'
/gems/connection_pool-2.4.1/lib/connection_pool.rb:110:in `block (2 levels) in with'
/gems/connection_pool-2.4.1/lib/connection_pool.rb:109:in `handle_interrupt'
/gems/connection_pool-2.4.1/lib/connection_pool.rb:109:in `block in with'
/gems/connection_pool-2.4.1/lib/connection_pool.rb:106:in `handle_interrupt'
/gems/connection_pool-2.4.1/lib/connection_pool.rb:106:in `with'
/gems/react-rails-3.1.1/lib/react/server_rendering.rb:28:in `render'
/gems/react-rails-3.1.1/lib/react/rails/component_mount.rb:50:in `prerender_component'
/gems/react-rails-3.1.1/lib/react/rails/component_mount.rb:37:in `block in react_component'
/gems/actionview-7.1.2/lib/action_view/helpers/capture_helper.rb:50:in `block in capture'
/gems/actionview-7.1.2/lib/action_view/buffers.rb:75:in `capture'
/gems/actionview-7.1.2/lib/action_view/helpers/capture_helper.rb:50:in `capture'
/gems/actionview-7.1.2/lib/action_view/helpers/tag_helper.rb:349:in `content_tag'
/gems/react-rails-3.1.1/lib/react/rails/component_mount.rb:76:in `rendered_tag'
/gems/react-rails-3.1.1/lib/react/rails/component_mount.rb:41:in `react_component'
/gems/react-rails-3.1.1/lib/react/rails/view_helper.rb:23:in `react_component'
/app/views/hello_world/hello_world_1.html.erb:2:in `_app_views_hello_world_hello_world___html_erb__2374411509695113706_19720'

[ahangarha]

Did you follow https://github.com/reactjs/react-rails#server-side-rendering to create separate webpack config for client and server-side rendering?

[mdesantis]

@ahangarha you're right; specifically, I skipped the part in which it says:

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

I didn't get I had to check it and copy the files. Now I have another error, but it's unrelated. Thanks!

[emmaakachukwu]

Did you follow https://github.com/reactjs/react-rails#server-side-rendering to create separate webpack config for client and server-side rendering?

The URL was 404 for me. Figured out it was moved to https://github.com/reactjs/react-rails/blob/master/docs/server-side-rendering.md