React_on_rails: Get "Cannot read property 'prototype' of undefined" error with SSR

[gambala]

v10.0.1 (both gem and yarn).

• ruby 2.4.1
• capistrano (3.10.0)
• capistrano-rails (1.3.0)
• execjs (2.7.0)
• libv8 (5.9.211.38.1)
• mini_racer (0.1.14)
• rails (5.1.4)
• webpacker (3.0.2)

app/views/molly/welcome/index.slim

= react_component 'TestBlock', prerender: true

TestBlock.jsx

import React from 'react';

const TestBlock = () => (
  <div>Just test</div>
);

export default TestBlock;

ssr.js pack

import ReactOnRails from 'react-on-rails';

import TestBlock from 'components/TestBlock';

ReactOnRails.register({
  TestBlock,
});

react_on_rails.rb

ReactOnRails.configure do |config|
  config.build_production_command = 'RAILS_ENV=production bin/webpack'
  config.build_test_command = 'RAILS_ENV=test bin/webpack'
  config.server_bundle_js_file = 'ssr.js'
end

Stacktrace:

ERROR in SERVER PRERENDERING
Encountered error: "TypeError: Cannot read property 'prototype' of undefined"
when prerendering TestBlock with props: {}
js_code was:
(function() {
  var railsContext = {"inMailer":false,"i18nLocale":"ru","i18nDefaultLocale":"ru","href":"http://localhost:3000/molly","location":"/molly","scheme":"http","host":"localhost","port":3000,"pathname":"/molly","search":null,"httpAcceptLanguage":"ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4","serverSide":true};

  var props = {};
  return ReactOnRails.serverRenderReactComponent({
    name: 'TestBlock',
    domNodeId: 'TestBlock-react-component-4abd435a-971a-486c-b943-a00fb6373fc1',
    props: props,
    trace: true,
    railsContext: railsContext
  });
})()


runInContext (webpack-internal:///148:4351:29)
Object.eval (webpack-internal:///148:5170:5)
Object.eval (webpack-internal:///148:5203:4)
Object.58 (webpack-internal:///148:5205:4)
s (webpack-internal:///148:2:576)
eval (webpack-internal:///148:2:627)
Object.call.env (webpack-internal:///148:1756:13)
Object.22.../utils/event (webpack-internal:///148:1887:4)
s (webpack-internal:///148:2:576)
eval (webpack-internal:///148:2:627)
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:180:in `eval_unsafe'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:180:in `block (2 levels) in eval'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:239:in `timeout'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:179:in `block in eval'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:69:in `block in with_lock'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:69:in `synchronize'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:69:in `with_lock'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/mini_racer-0.1.14/lib/mini_racer.rb:177:in `eval'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/mini_racer_runtime.rb:10:in `block in initialize'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/mini_racer_runtime.rb:66:in `translate'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/mini_racer_runtime.rb:9:in `initialize'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/runtime.rb:57:in `new'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/runtime.rb:57:in `compile'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/execjs-2.7.0/lib/execjs/module.rb:27:in `compile'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/lib/react_on_rails/server_rendering_pool/exec.rb:117:in `create_js_context'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/lib/react_on_rails/server_rendering_pool/exec.rb:14:in `block in reset_pool'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:170:in `try_create'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:82:in `block (2 levels) in pop'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:78:in `loop'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:78:in `block in pop'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:77:in `synchronize'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool/timed_stack.rb:77:in `pop'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool.rb:89:in `checkout'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool.rb:61:in `block in with'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool.rb:60:in `handle_interrupt'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/connection_pool-2.2.1/lib/connection_pool.rb:60:in `with'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/lib/react_on_rails/server_rendering_pool/exec.rb:86:in `eval_js'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/lib/react_on_rails/server_rendering_pool/exec.rb:50:in `server_render_js_with_console_logging'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/lib/react_on_rails/server_rendering_pool.rb:23:in `method_missing'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/app/helpers/react_on_rails_helper.rb:425:in `server_rendered_react_component_html'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/app/helpers/react_on_rails_helper.rb:354:in `internal_react_component'
/home/gambala/.rvm/gems/ruby-2.4.1/gems/react_on_rails-10.0.1/app/helpers/react_on_rails_helper.rb:100:in `react_component'
/home/gambala/git/melp-rails/engines/molly/app/views/molly/welcome/index.slim:4:in `_engines_molly_app_views_molly_welcome_index_slim___2949193617467986396_69989567238540'

[AnatoliiD]

Cannot reproduce the error.

[gambala]

Sad news 😞 I don't know, will I have a time to create simple test example. I used react-rails gem in my project. and I got different SSR errors too, then I decide to give react-on-rails a try. And it's a good gem too, with good team involved in its development.

I detected three problems, which are described in this issue, #966 and in #549. They prevent me from using react-on-rails in my projects. Ironically, I think I solved SSR problems with react-rails gem a couple of minutes ago, and now I can contunie to use it. Should I close this issue now, or maybe other users will get same error and will leave comments here?

[AnatoliiD]

The problem with json3 dependency (https://github.com/felixge/node-sandboxed-module/issues/55)
Workaround before fix is to use bin/webpack -w instead of bin/webpack-dev-server

[justin808]

@railsme @gambala the use of the webpacker binstubs and webpacker default configuration is loaded with gotchas and the obfuscations of having the main code being in the NPM library for webpacker. You may want to consider a setup similar to https://github.com/shakacode/react-webpack-rails-tutorial.

[cagedartist]

I'm getting the same error. I started my demo application by following the shakacode tutorial mentioned by @justin808. The gem versions are similar to @gambala. Everything works fine unless I try to prerender. Can't use bin/webpack -w -- error: Unknown switches '-w'.

ERROR in SERVER PRERENDERING
Encountered error: "TypeError: Cannot read property 'prototype' of undefined"
when prerendering HelloWorld with props: {"name":"Stranger"}
js_code was:
(function() {
  var railsContext = {"inMailer":false,"i18nLocale":"en","i18nDefaultLocale":"en","href":"http://localhost:3000/hello_world","location":"/hello_world","scheme":"http","host":"localhost","port":3000,"pathname":"/hello_world","search":null,"httpAcceptLanguage":"en-US,en;q=0.9","serverSide":true};

  var props = {"name":"Stranger"};
  return ReactOnRails.serverRenderReactComponent({
    name: 'HelloWorld',
    domNodeId: 'HelloWorld-react-component-e66246e8-7a25-4d4a-afc3-e1d68b9ea1e3',
    props: props,
    trace: true,
    railsContext: railsContext
  });
})()

[justin808]

@cagedartist Please don't use the webpacker setup if you want to do server side rendering (pre-render). As of a few months ago, webpacker was NOT setup to do SSR.

@cagedartist @railsme @gambala Any chance that one of you can give us a doc PR?

[cagedartist]

Thanks, @justin808 -- Glad to know it's not something I did wrong.

[justin808]

@cagedartist Also, be sure to update to the latest version 10.0.1.

[vasilakisfil]

bin/webpack -w on Procfile.dev-server worked for me, thanks.

[AnatoliiD]

@vasilakisfil don't forget to cleanup public/packs directory from time to time :)

@justin808 I will check what the difference between configurations.