flushChunkNames() returning empty array with base reactQL setup

[shomanishikawa]

Thanks so much for your work. This is potentially the perfect solution for us.

I am setting up an app based on the boilerplate reactQL - on the base install, I have set up all the necessary components of react-universal-component on the client and server.

I now have imports that get compiled down to this:

var UniversalComponent = __WEBPACK_IMPORTED_MODULE_4_react_universal_component___default()(function (props) {
  return __WEBPACK_IMPORTED_MODULE_2_babel_plugin_universal_import_universalImport_js___default()({
    id: './',
    file: '/Users/shomanishikawa/Desktop/app2/src/components/Home.jsx',
    load: function load() {
      return Promise.all([__webpack_require__(362)("./" + props.page), __WEBPACK_IMPORTED_MODULE_1_babel_plugin_universal_import_importCss_js___default()('' + props.page)]).then(function (proms) {
        return proms[0];
      });
    },
    path: function path() {
      return __WEBPACK_IMPORTED_MODULE_0_path___default.a.join(__dirname, './' + props.page);
    },
    resolve: function resolve() {
      return /*require.resolve*/(__webpack_require__(363).resolve("./" + props.page));
    },
    chunkName: function chunkName() {
      return '' + props.page;
    }
  });
});

when you navigate to this page, you correctly get the bundle as a separate request. On the SSR though, both the client and server first initialize in their 'loading...' state. So I have moved on to implementing webpack-flush-chunks.

this is a segment of the server render:

export function createReactHandler(css = [], scripts = [], chunkManifest = {}) {
  return async function reactHandler(ctx) {
    const routeContext = {};

    // Create a new server Apollo client for this request
    const client = serverClient();

    // Create a new Redux store for this request
    const store = createNewStore(client);

    // Generate the HTML from our React tree.  We're wrapping the result
    // in `react-router`'s <StaticRouter> which will pull out URL info and
    // store it in our empty `route` object
    const components = (
      <StaticRouter location={ctx.request.url} context={routeContext}>
        <ApolloProvider store={store} client={client}>
          <App />
        </ApolloProvider>
      </StaticRouter>
    );

    // Wait for GraphQL data to be available in our initial render,
    // before dumping HTML back to the client
    await getDataFromTree(components);

    // Full React HTML render
    const html = ReactDOMServer.renderToString(components);

    console.log(flushChunkNames());

flushChunkNames() always returns an empty array, even when loading a route that has to synchronously import a dynamic bundle (and the bundle does indeed get loaded dynamically after page load)

The stripped down example is here - it has the base reactQL install with the setup for react-universal-component.

Not sure exactly what the issue is, and would appreciate if you could point me in the right direction. Maybe some part of the existing reactQL setting is preventing the tracking of bundles?

[shomanishikawa]

Sorry to keep creating and closing issues.

This was fixed by ditching the webpack-node-externals using the whitelist options, and constructing the externals object myself.

[faceyspacey]

Not a problem...You know, i need to look into why webpack-node-externals is problematic. If you have time, it would be great to get some clues on why it doesn't work. no pressure.

[shomanishikawa]

Will definitely look into it! It's the least I could do. Thanks again for your awesome work.

[bkniffler]

I'd really like to know why webpack-node-externals won't work.. I've tried to get it to work with react-universal-component and webpack-flush-chunks, but nothing works. I've got kinda complex externals, so your version of node-externals will not work unfortunately.

Any idea what could be causing the incompatibility with webpack-node-externals?

[bkniffler]

After putting the babel plugin into my own application:

const babelOptions = {
    presets: ['react'],
    plugins: [
      'syntax-dynamic-import',
      'transform-object-rest-spread',
      // 'transform-es2015-destructuring',
      'transform-decorators-legacy',
      'transform-class-properties',
      'transform-es2015-classes',
      ['import', { libraryName: 'antd', style: true }],
      resolve(__dirname, 'universal-import'),
    ],
  };

The problem with webpack-node-externals disappeared and server works perfectly fine.