react-rails: Server rendering with CommonsChunkPlugin raises webpackJsonp is not defined

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.

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.

I took @RiccardoMargiotta’s solution and made it a bit more dynamic. This is what I ended up with, in case it helps anyone:

const path = require('path');
const fs = require('fs');

const bundlesPath = path.join(__dirname, '..', '..', 'app', 'javascript', 'packs');
const bundles = fs.readdirSync(bundlesPath).map((file) => {
  return file.replace('.js', '');
}).filter((file) => file !== 'server-bundle'); // This could be server_rendering, etc

// Extract common vendor libraries into a vendor pack
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;
    },
    chunks: bundles
  })
);

// Extract webpack bootstrap into its own file. This allows a file that has not
// been changed to keep its hash when other files change.
environment.plugins.append(
  'CommonsChunkManifest',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity,
    chunks: ['vendor']
  })
);

@jDeppen Ah, we’re not actually using sourcemaps, we’ve updated our webpack development.js and production.js configs to remove them. I’m not sure if you’d be able to get around that while still inlining the file.

@raapperez You might find you solution in rails/webpacker#119 or webpack/webpack#368