Server rendering with CommonsChunkPlugin raises webpackJsonp is not defined

I started a clean project using:

$ bundle install
$ rails webpacker:install
$ rails webpacker:install:react
$ rails generate react:install
$ rails g react:component HelloWorld greeting:string

Then I added a server render tag in my view:

<%= react_component('HelloWorld', {name: 'John'}, {prerender: true}) %>

And it worked as expected.

Then I tried to setup a commons chunk plugin in the webpack/environment.js file:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack');

const commonLibraries = [
  '/querobolsa/node_modules/jquery/dist/jquery.js',
];

environment.plugins.insert('CommonsChunkPlugin',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    minChunks: function (module, count) {
      if (commonLibraries.indexOf(module.resource) !== -1) return true;
    }
  })
);
module.exports = environment

It makes the server rendering stop working with the error:

ReferenceError: webpackJsonp is not defined.

It looks like the compiled file server_rendering.js requires that the common.js chunk to be loaded first.

So I tried to add the following code in config/application.rb:

# Settings for the pool of renderers:
    config.react.server_renderer_pool_size  ||= 1  # ExecJS doesn't allow more than one on MRI
    config.react.server_renderer_timeout    ||= 20 # seconds
    config.react.server_renderer = React::ServerRendering::BundleRenderer
    config.react.server_renderer_options = {
      files: ["common.js", "server_rendering.js"],       # files to load for prerendering
      replay_console: true,                 # if true, console.* will be replayed client-side
    }
    # Changing files matching these dirs/exts will cause the server renderer to reload:
    config.react.server_renderer_extensions = ["jsx", "js"]
    config.react.server_renderer_directories = ["/app/assets/javascripts", "/app/javascript/"]

And it raises the following error:

/tmp/execjs20180122-30273-6tq9dmjs:27938
/* 51 */,
        ^

SyntaxError: Unexpected token ,
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:588:28)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Function.Module.runMain (module.js:665:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

Please, can someone give me a solution to this problem? I know if I skip the server_rendering in commons chunk process it would work, but I don’t know how to do this.

System configuration

Webpacker version: 3.2.1 React-Rails version: 2.4.3 Rect_UJS version: 2.4.3 Rails version: 5.1.4 Ruby version: 2.4.1

[RiccardoMargiotta]

I managed to get this working on our main project by stopping the server_rendering.js file from being chunked.

We’re using fairly standard setups for webpacker and react-rails, with application.js and server_rendering.js entry points. I began by using the Webpacker example for setting up the CommonChunksPlugin (https://github.com/rails/webpacker/blob/master/docs/webpack.md#add-common-chunks):

const { environment } = require('@rails/webpacker');
const webpack = require('webpack')

environment.plugins.append(
  'CommonsChunkVendor',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: (module) => {
      // this assumes your vendor imports exist in the node_modules directory
      return module.context && module.context.indexOf('node_modules') !== -1
    }
  })
)

environment.plugins.append(
  'CommonsChunkManifest',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
  })
)

module.exports = environment;

I set the first chunk to only run on the application entry point, thereby ignoring server_rendering.

Then I set the second chunk (which extracts the Webpack runtime) to only run on the chunk called vendor we just created - effectively again ignoring server_rendering, because it didn’t get chunked out to vendor.

So I wound up with:

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

environment.plugins.append(
  'CommonsChunkVendor',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks: module => {
      return module.context && module.context.includes('node_modules');
    },
    chunks: ['application']
  })
);

environment.plugins.append(
  'CommonsChunkManifest',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity,
    chunks: ['vendor']
  })
);

module.exports = environment;

In application.html.erb, we now load three JS files on the client side:

  <%= javascript_pack_tag "manifest.js" %>
  <%= javascript_pack_tag "vendor.js" %>
  <%= javascript_pack_tag "application.js" %>

Hope that helps! For reference, I ran bin/webpack --display-entrypoints for more detailed output:

                                       Asset       Size  Chunks                    Chunk Names
              vendor-e5362835eab5e8423e38.js    1.09 MB       0  [emitted]  [big]  vendor
         application-369071402e939381b3b2.js     1.1 MB       1  [emitted]  [big]  application
    server_rendering-7b68441c3dc38a040cd3.js    2.19 MB    2, 0  [emitted]  [big]  server_rendering
            manifest-92c7bc2fbbeb9c585893.js    5.97 kB       3  [emitted]         manifest
          vendor-e5362835eab5e8423e38.js.map    1.23 MB       0  [emitted]         vendor
     application-369071402e939381b3b2.js.map     674 kB       1  [emitted]         application
server_rendering-7b68441c3dc38a040cd3.js.map     1.9 MB    2, 0  [emitted]         server_rendering
        manifest-92c7bc2fbbeb9c585893.js.map    6.02 kB       3  [emitted]         manifest
                               manifest.json  606 bytes          [emitted]
Entrypoint application [big] = manifest-92c7bc2fbbeb9c585893.js manifest-92c7bc2fbbeb9c585893.js.map vendor-e5362835eab5e8423e38.js vendor-e5362835eab5e8423e38.js.map application-369071402e939381b3b2.js application-369071402e939381b3b2.js.map
Entrypoint server_rendering [big] = server_rendering-7b68441c3dc38a040cd3.js server_rendering-7b68441c3dc38a040cd3.js.map

So you see application gets split into three, while server_rendering stays whole.

[BookOfGreg]

The simple solution is make sure your server_rendering.js isn’t chunked. There is no need for doing it as chunking is only for the client’s benefit, and it makes the code more complex.

The first possible solution is that there is some sort of name conflict with the chunk and file name, and the other one was look at other react with rails solutions, the next best one being https://github.com/renchap/webpacker-react incase that doesn’t have the chunking issues.