react-rails: SplitChunks and SSR: Cannot read property 'serverRender' of undefined

I found the issue and updated my sample repo with the solution that I found.

It looks like react-rails’s default WebpackerManifestContainer calls Webpacker.manifest.lookup instead of Webpacker.manifest.lookup_pack_with_chunks when SplitChunks is enabled, so it never ends up executing the server_rendering.js which it needs in order to set the ReactRailsUJS global variable.

WebpackerManifestContainer should probably be updated to account for SplitChunks.

Hey @RyanMcDonald, thanks so much for your example and the repro! Between the two, I got this working as well.

For anyone else who attempts this next, one other piece that I needed to do was add this:

// environment.js
environment.config.set(
  'output.globalObject',
  "(typeof self !== 'undefined' ? self : this)"
)

Otherwise you’ll get a window is not defined error.

I configured SplitChunks to ignore server_rendering.js, which seems to work fine:

// We have two entry points, application and server_rendering.
// We always want to keep server_rendering intact, and must
// exclude it from being chunked.

const notServerRendering = name => name !== 'server_rendering';

module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks(chunk) {
            return notServerRendering(chunk.name);
          }
        }
      }
    }
  }
};

Same here. Rails 6. Neither monkey-patch nor chunk exclusion helped…

If you opt-out the server_rendering, it definitely adds/duplicates your vendor files to the server_rendering.js… Not sure if that’s ideal.

My understanding was that server_rendering.js needs to have vendor files included to function, presumably so it can render components with React DOM. Since that’s only used by the server and not shipped to clients, I haven’t been too worried about it. Although I don’t know if there are performance considerations, I suppose ultimately the server still needs to run that JS…

I mentioned on the other post, I have an updated version of that snippet to also create a separate vendor_react bundle to allow for longer caching. The concept is still the same, blocking server_rendering.js from being chunked.

We still just have one large application bundle, though. In future, I’d like to at least route-split the app JS with additional entry points, but haven’t gotten that working with the react-rails gem yet.

// We have two entry points, application and server_rendering.
// We always want to keep server_rendering intact, and must
// exclude it from being chunked.

const notServerRendering = name => name !== 'server_rendering';

module.exports = {
  optimization: {
    splitChunks: {
      chunks(chunk) {
        return notServerRendering(chunk.name);
      },
      cacheGroups: {
        vendor: {
          name: 'vendor',
          priority: -10,
          test: /[\\/]node_modules[\\/]/
        },
        vendor_react: {
          name: 'vendor_react',
          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/
        }
      }
    }
  }
};

  <%= javascript_pack_tag "vendor_react.js", defer: true %>
  <%= javascript_pack_tag "vendor.js", defer: true %>
  <%= javascript_pack_tag "application.js", defer: true %>

@ericraio I checked and yes you can still use javascript_packs_with_chunks_tag. What’s happening is that the SSR will only use server_rendering.js to execute javascript on the page, and all of the chunked javascript files are ignored on the server side. That way, you still get the efficiency of splitChunks for delivering assets to the client.