React_on_rails: Prerender:true error

[BrunoQuaresma]

I try prerender my component but the application throw this error:

Is a directory @ io_fread - app/assets/webpack/

[justin808]

@BrunoQuaresma Can you make this sample app work for you: https://github.com/shakacode/react-webpack-rails-tutorial?

[Undistraction]

Same error here. From the docs it is unclear how to configure an application to use server-side rendering.

[justin808]

Take a look at these lines:

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/config/initializers/react_on_rails.rb#L14

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/config/initializers/react_on_rails.rb#L23

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/webpack.server.js#L10

https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/webpack.client.js#L14

@jbhatab changed the new generator to only output one server rendering file. I bet he forget to change the

  config.server_bundle_js_file = "server-bundle.js"

[BrunoQuaresma]

@justin808 what is the difference between clientRegistration and serverRegistration files?

[BrunoQuaresma]

Now, after configure the server-bundle ... this error appears:
Encountered error: "ReferenceError: document is not defined"

[EDIT]
When i use components from the app works OK!

import Hello from "../components/Hello"

ReactOnRails.register({
  Hello
})

But when i try use a package the app throws error.

import { Ballon } from "foo-package"
import Hello from "../components/Hello"

ReactOnRails.register({
  Ballon,
  Hello
})

ERROR in SERVER PRERENDERING
Encountered error: "ReferenceError: document is not defined"

[justin808]

@justin808 what is the difference between clientRegistration and serverRegistration files?

For advanced apps, especially using react-router, we might have different initialization code for the server rendering vs. client rendering.

Regarding the last error, you have a problem with your ES6 imports. I'd suggest maybe using StackOverflow for that question.

[BrunoQuaresma]

ok @justin808 thanks for the info and patience.

[knagode]

What is proper way to use prerendering in example?

<%= react_component("HelloWorldApp",
                     props: @hello_world_props,
                     prerender: true) %>

I modified initializers/react_on_rails.rb:

  config.webpack_generated_files = %w( app-bundle.js vendor-bundle.js server-bundle.js )
  config.server_bundle_js_file = "server-bundle.js"

I tried bunch of other stuff but nothing worked. Can somebody help?

[BrunoQuaresma]

@knagode when you run the foreman the server-bundle.js is created in app/assets/webpack folder?

[justin808]

@knagode setting the prerender value in the view will override the config setting. Always get the basics working perfectly at first before trying prerendering.

The config.server_bundle_js_file must match the file you use to generate your server bundle. In some simpler cases, you can use the same bundle file for client and server rendering. In the https://github.com/shakacode/react-webpack-rails-tutorial/, we use separate bundle files. These can be seen here:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js

Take a look at the sibling webpack* files.

And see how the output file name corresponds to the config/initializers/react_on_rails.rb file:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client/webpack.server.rails.build.config.js#L18

and

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/initializers/react_on_rails.rb#L15

Also be sure that these all match up with your webpack files:

https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/config/initializers/react_on_rails.rb#L5

ReactOnRails.configure do |config|
  # Directory where your generated assets go. All generated assets must go to the same directory.
  # Configure this in your webpack config files. This relative to your Rails root directory.
  config.generated_assets_dir = File.join(%w(app assets webpack))

  # Define the files for we need to check for webpack compilation when running tests
  config.webpack_generated_files = %w( app-bundle.js vendor-bundle.js app-bundle.css
                                       vendor-bundle.css server-bundle.js )

  # This is the file used for server rendering of React when using `(prerender: true)`
  # If you are never using server rendering, you may set this to "".
  # If you are using the same file for client and server rendering, having this set probably does
  # not affect performance.
  config.server_bundle_js_file = "server-bundle.js"

[justin808]

@jbhatab, is this an issue: https://github.com/shakacode/react_on_rails/issues/460#issuecomment-228181485

[codercr]

@justin808 I have server side rendering working find when I run foreman start -f Procfile.dev. But when I run foreman start -f Procfile.dev-server I get the error No such file or directory @ rb_file_s_mtime - http://localhost:3035/packs/application-af1fcdce5b681ac6378b.js. I have a pack called application.js which builds properly when I run without webpack dev server. It does not seem to work when I run web server. I have looked at a number of documents and cannot seem to figure out the answer.

If I go to the url http://localhost:3035/packs/application-af1fcdce5b681ac6378b.js, I get the expect javascript file. I am not sure why react_on_rails v11 is not finding it.

---

HMR just does not seem to work. It adds calls to window["webpackHotUpdate"] which ends up breaking the server side rendering. I am guessing you cannot have both.

[justin808]

@codercr:

1. HMR is very specific depending on your code and node versions. And you definitely can't have SSR with the webpacker default of using packs.
2. Can you please try to run the examples in the spec/dummy directory? can you please post a simple example on github? was you code working pre-v11? The webpack-dev-server may depend on your webpack version as well.

[codercr]

@justin808:

Sorry for delayed response. I realized the default configuration was not going to allow server side rendering when using HMR no matter what version I used. It was not a v11 issue.