When prerender is enabled the generated code fails with a TypeError

[sigmike]

I created a new Rails 4 app, added react_on_rails and ran the generator with --redux --server-rendering --ruby-linters and when I start the server with npm run rails-server and access http://localhost:3000/hello_world I get this error:

ERROR in SERVER PRERENDERING
Encountered error: "TypeError: Cannot read property 'name' of undefined"
when prerendering HelloWorldApp with props: {"name":"Stranger"}
js_code was:
(function() {
  var props = {"name":"Stranger"};
  return ReactOnRails.serverRenderReactComponent({
    name: 'HelloWorldApp',
    domNodeId: 'HelloWorldApp-react-component-0',
    props: props,
    trace: true,
    location: '/hello_world'
  });
})()


Object.<anonymous> ((execjs):27005:53)
__webpack_require__ ((execjs):31:30)
Object.<anonymous> ((execjs):26955:15)
__webpack_require__ ((execjs):31:30)

The generated app is here: https://github.com/sigmike/test_react_on_rails/tree/prerender_fail

[justin808]

There's a problem with server rendering. Not sure what it might be. I'll take a look tonight.

[justin808]

@sigmike Can you please try 2.01. or 2.0.0 of react-on-rails from npm and see if that solves the issue. Thanks.

[sigmike]

I changed react-on-rails to 2.0.1 in client/package.json, ran npm install, restarted the server and I get the same error.

[bshyong]

I got this too; I tried 2.2.0 and 2.0.0 as well and it's still the same error. I was trying to trace this down but can't find out what it may be..

[justin808]

This is probably happening only for server rendering. I appreciate any help getting this tracked down.

[justin808]

I'm updating a branch code that now allows tracking this down much more easily!

#244

Please pull the code here.

To repro:

npm i && npm run build
cd spec/dummy
bundle && npm i
foreman start

Then visit: http://localhost:3000/server_side_hello_world

    /*
    * This is a dummy function to check if the function name has been altered by minification.
    * If the function has been minified and NODE_ENV !== 'production', warn the user.
    */
    function isCrushed() {}

    if (process.env.NODE_ENV !== 'production' && setInterval.name === 'setInterval' && isCrushed.name !== 'isCrushed') {
      _utilsWarning2['default']('You are currently using minified code outside of NODE_ENV === \'production\'. ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) ' + 'to ensure you have the correct code for your production build.');
    }

    exports.createStore = _createStore2['default'];
    exports.combineReducers = _combineReducers2['default'];
    exports.bindActionCreators = _bindActionCreators2['default'];
    exports.applyMiddleware = _applyMiddleware2['default'];
    exports.compose = _compose2['default'];
    /* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(190)))

[justin808]

See reduxjs/redux#1335

[justin808]

Pushing polyfill shortly

[justin808]

Fixed in 2.3.0 and #244. See https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md.

[pherris]

Possible that this is back in 5.2.0? I am seeing the same issue but I have been pulling in the css module/webpack hot reload refactoring so my install isn't pure.

https://github.com/pherris/react-on-rails-novu/compare/server-rendering?expand=1

The exception seems to be coming from this line: https://github.com/pherris/react-on-rails-novu/blob/17256445fd664d56ed0c7c58f12fe7617edb9460/client/app/bundles/HelloWorld/store/helloWorldStore.jsx#L21

ERROR in SERVER PRERENDERING
Encountered error: "ReferenceError: full_name is not defined"
when prerendering HelloWorldApp with props: {"person":{"full_name":"Stranger"}}
js_code was:
(function() {
  var railsContext = {"href":"http://localhost:3000/hello_world","location":"/hello_world","scheme":"http","host":"localhost","port":3000,"pathname":"/hello_world","search":null,"i18nLocale":"en","i18nDefaultLocale":"en","httpAcceptLanguage":"en-US,en;q=0.8","serverSide":true};

  var props = {"person":{"full_name":"Stranger"}};
  return ReactOnRails.serverRenderReactComponent({
    name: 'HelloWorldApp',
    domNodeId: 'HelloWorldApp-react-component-0',
    props: props,
    trace: true,
    railsContext: railsContext
  });
})()


Object.<anonymous> ((execjs):24330:54)
__webpack_require__ ((execjs):53:30)
Object.exports.__esModule ((execjs):22732:25)
__webpack_require__ ((execjs):53:30)
Object.defineProperty.value ((execjs):19875:29)
__webpack_require__ ((execjs):53:30)
Object.<anonymous> ((execjs):82:19)
__webpack_require__ ((execjs):53:30)
(execjs):73:18
(execjs):76:10
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:14:in `initialize'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `new'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `compile'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/module.rb:27:in `compile'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/react_on_rails-5.2.0/lib/react_on_rails/server_rendering_pool.rb:92:in `create_js_context'
/Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/react_on_rails-5.2.0/lib/react_on_rails/server_rendering_pool.rb:11:in `block in reset_pool'

in the console:

10:37:24 web.1         | Started GET "/hello_world" for ::1 at 2016-04-29 10:37:24 -0500
10:37:24 web.1         | Processing by HelloWorldController#index as HTML
10:37:24 web.1         | ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
10:37:24 web.1         | react_renderer.rb: 92
10:37:24 web.1         | wrote file tmp/server-generated-1.js
10:37:24 web.1         | ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
10:37:24 web.1         | ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
10:37:24 web.1         | react_renderer.rb: 92
10:37:24 web.1         | wrote file tmp/base_js_code.js
10:37:24 web.1         | ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
10:37:24 web.1         | ERROR when compiling base_js_code! See file tmp/base_js_code.js to correlate line numbers of error. Error is
10:37:24 web.1         | 
10:37:24 web.1         | ReferenceError: full_name is not defined
10:37:24 web.1         | 
10:37:24 web.1         | Object.<anonymous> ((execjs):24334:54)
10:37:24 web.1         | __webpack_require__ ((execjs):53:30)
10:37:24 web.1         | Object.exports.__esModule ((execjs):22736:25)
10:37:24 web.1         | __webpack_require__ ((execjs):53:30)
10:37:24 web.1         | Object.defineProperty.value ((execjs):19875:29)
10:37:24 web.1         | __webpack_require__ ((execjs):53:30)
10:37:24 web.1         | Object.<anonymous> ((execjs):82:19)
10:37:24 web.1         | __webpack_require__ ((execjs):53:30)
10:37:24 web.1         | (execjs):73:18
10:37:24 web.1         | (execjs):76:10
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:39:in `exec'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/external_runtime.rb:14:in `initialize'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `new'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/runtime.rb:44:in `compile'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/execjs-2.6.0/lib/execjs/module.rb:27:in `compile'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/react_on_rails-5.2.0/lib/react_on_rails/server_rendering_pool.rb:92:in `create_js_context'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/react_on_rails-5.2.0/lib/react_on_rails/server_rendering_pool.rb:11:in `block in reset_pool'
10:37:24 web.1         | /Users/andrew.ralston/.rvm/gems/ruby-2.2.3/gems/connection_pool-2.2.0/lib/connection_pool/timed_stack.rb:169:in `call'

started with foreman start -f Procfile.dev

in this case full_name is undefined, so I expect { full_name: undefined } - if I let full_name = '', the error moves to:

 ActionView::Template::Error (ERROR in SERVER PRERENDERING
10:46:57 web.1         | Encountered error: "ReferenceError: self is not defined"

[pherris]

Isolated it to the isomorphic-fetch import for my async operation based on this similar thread: denvned/isomorphic-relay#18

[justin808]

@pherris Was this issue ever resolved for you?

[dpuscher]

I've got the same problem, so maybe we can reopen this issue.

I also get this error when trying to use a prerendered component:
ERROR in SERVER PRERENDERING Encountered error: "ReferenceError: self is not defined"

This happens every time i use fetch in my code. Doesn't matter if I use the isomorphic-fetch polyfill or not...

[justin808]

@dpuscher You'll have to debug this. Feel free to open a PR if you see a fix or post more info in a new issue.

[dpuscher]

Just in case anyone will stumble upon this problem in the future:
My problem was, that I was using style-loader to include css into my react component, which embedded the styles into the DOM. This is not supported when using server side rendering, so I extracted the css to a separate file using extract-text-webpack-plugin.