SSR (Server Side Rendering) with Shakapacker #1201

paul-mesnilgrente · 2022-09-09T21:40:36Z

Steps to reproduce

Clone this repo: https://github.com/paul-mesnilgrente/shakapacker-with-react-rails
yarn and bundle install
bin/rails server and bin/webpacker-dev-server
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

I created a brand new repo
Added Shakapacker and followed its installation steps
Added the react-rails gem
Re-created the install steps of react-rails on this test repo
Got a working version of a component working without SSR
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.

The text was updated successfully, but these errors were encountered:

paul-mesnilgrente · 2022-09-20T20:32:20Z

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 · 2022-09-27T13:23:02Z

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 · 2022-09-27T15:40:11Z

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 · 2022-10-07T11:43:46Z

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

alkesh26 · 2022-10-07T18:00:26Z

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

alkesh26 · 2022-10-08T06:19:00Z

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

Judahmeek · 2022-10-13T20:38:52Z

@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 · 2022-10-19T23:40:23Z

@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 · 2022-11-10T21:32:12Z

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 · 2022-11-11T04:30:21Z

@tegandbiscuits Should we release an NPM package with UJS.

For your use case, would react_on_rails work better?

justin808 · 2022-11-11T04:31:49Z

@ahangarha can you take a look?

ahangarha · 2022-11-11T11:08:41Z

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

ahangarha · 2022-11-20T09:57:02Z

@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 · 2023-01-16T23:54:49Z

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 · 2023-01-17T08:33:12Z

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

Judahmeek · 2023-02-15T05:05:03Z

@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 · 2023-02-15T17:24:07Z

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

Judahmeek · 2023-02-17T22:43:52Z

@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 · 2023-02-20T01:46:34Z

@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 · 2023-09-02T18:03:05Z

Having the same error

ahangarha · 2023-09-04T10:14:16Z

~~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.

Judahmeek mentioned this issue Oct 13, 2022

SSR (Server Side Rendering) with react-rails shakacode/shakapacker#187

Closed

Judahmeek closed this as completed Feb 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR (Server Side Rendering) with Shakapacker #1201

SSR (Server Side Rendering) with Shakapacker #1201

paul-mesnilgrente commented Sep 9, 2022

paul-mesnilgrente commented Sep 20, 2022

Faq commented Sep 27, 2022

paul-mesnilgrente commented Sep 27, 2022

alkesh26 commented Oct 7, 2022

alkesh26 commented Oct 7, 2022

alkesh26 commented Oct 8, 2022

Judahmeek commented Oct 13, 2022

justin808 commented Oct 19, 2022 •

edited

Loading

tegandbiscuits commented Nov 10, 2022

justin808 commented Nov 11, 2022

justin808 commented Nov 11, 2022

ahangarha commented Nov 11, 2022

ahangarha commented Nov 20, 2022

justin808 commented Jan 16, 2023

ahangarha commented Jan 17, 2023 •

edited

Loading

Judahmeek commented Feb 15, 2023

antoine-khawa commented Feb 15, 2023

Judahmeek commented Feb 17, 2023

antoine-khawa commented Feb 20, 2023

andrisole92 commented Sep 2, 2023

ahangarha commented Sep 4, 2023 •

edited

Loading

SSR (Server Side Rendering) with Shakapacker #1201

SSR (Server Side Rendering) with Shakapacker #1201

Comments

paul-mesnilgrente commented Sep 9, 2022

Steps to reproduce

Expected behavior

Actual behavior

System configuration

paul-mesnilgrente commented Sep 20, 2022

Faq commented Sep 27, 2022

paul-mesnilgrente commented Sep 27, 2022

alkesh26 commented Oct 7, 2022

alkesh26 commented Oct 7, 2022

alkesh26 commented Oct 8, 2022

Judahmeek commented Oct 13, 2022

justin808 commented Oct 19, 2022 • edited Loading

tegandbiscuits commented Nov 10, 2022

justin808 commented Nov 11, 2022

justin808 commented Nov 11, 2022

ahangarha commented Nov 11, 2022

ahangarha commented Nov 20, 2022

justin808 commented Jan 16, 2023

ahangarha commented Jan 17, 2023 • edited Loading

Judahmeek commented Feb 15, 2023

antoine-khawa commented Feb 15, 2023

Judahmeek commented Feb 17, 2023

antoine-khawa commented Feb 20, 2023

andrisole92 commented Sep 2, 2023

ahangarha commented Sep 4, 2023 • edited Loading

justin808 commented Oct 19, 2022 •

edited

Loading

ahangarha commented Jan 17, 2023 •

edited

Loading

ahangarha commented Sep 4, 2023 •

edited

Loading