SSR ExecJS::ProgramError when using client side code splitting

Steps to reproduce

I have a component that has a componentDidMount like so:

  public async componentDidMount() {
    const [Foo, Bar] = await Promise.all([
      import(/* webpackChunkName: "stuff" */ 'foo'),
      import(/* webpackChunkName: "stuff" */ 'bar'),
     ]);
    this.setState({
      Foo: Foo.default,
      Bar: Bar.default,
    });
  }

Expected behavior

Since the import occurs inside componentDidMount, it’s expected that that code does not cause issues when using SSR with ExecJS. In this code, the intention is for code splitting to occur for the client side only.

Actual behavior

A ExecJS::ProgramError is raised, stating ‘ReferenceError: window is not defined’. I have eliminated it down to this code which happens to be the very beginning of the server_rendering.js output:

/******/ (function(modules) { // webpackBootstrap
/******/ 	// install a JSONP callback for chunk loading
/******/ 	var parentJsonpFunction = window["webpackJsonp"];
...

If I change componentDidMount to be blank (or really just remove the import calls in it), webpack does not add the above snippet and no SSR error occurs. Is there a mechanism within this gem to allow for client side code splitting like this and still allow for the component to be rendered server-side?

System configuration

Sprockets or Webpacker version: Webpacker 3.5.3 React-Rails version: 2.4.7 Rect_UJS version: 2.4.4 Rails version: 5.2.0 Ruby version: 2.5.1p57

[nopelluhh]

I’m looking into the above fix, will report back!

[jdfm]

@bcharna Although I have this issue as well on a project I’m working on, I don’t think this is related to react-rails at all, but indeed webpack, so, I’m thinking reporting it to the https://github.com/rails/webpacker people will be more useful.