Global override `lazy` in test environment to prevent chunking

[rosskevin]

I'm using lazy loading for code splitting with great success!

import Dashboard from 'bundle?lazy!./components/Dashboard'

The problem comes during testing:

WARNING in ./~/bundle-loader?lazy!./src/routes/Home/components/Dashboard.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

If it's a test environment, I'd like to be able to globally disable lazy loading. Due to the nature of static ES6 imports, I cannot parameterize the import.

Is this something that would seem useful as a PR?

Are there other ways of solving this (while leaving my import as-is.)? NOTE: I don't want to configure an implicit bundle-loader based on path, I want the explicit import.

[rosskevin]

This would also be really helpful to work around the inability to hot-reload async components at the present time:

• https://github.com/gaearon/react-hot-loader/issues/288
• https://github.com/gaearon/react-hot-boilerplate/pull/61#issuecomment-218835358

[michael-ciniawsky]

@rosskevin Please feel free to send PR for further discussion 😛

[julienR2]

Hi ! I run into this trouble too. More specifically using Angular 2 Universal for which I wanted the server part not to be chunked (https://github.com/angular/angular-cli/issues/7187)

I just find a workaround using webpack max-chunk option like this

new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1})

(https://github.com/webpack/docs/wiki/optimization#chunks)

I hope it can help !

[rogersp]

In my case, bundle-loader (as used in React Router v4 code splitting demo) was breaking react hot reloading in development. I was unable to resolve the issue with LimitChunkCountPlugin.

What did work however, was NormalModuleReplacementPlugin to take a path like this:

import loadDashboard from 'bundle?lazy!./components/Dashboard'

and in development, turn it into:

import loadDashboard from './components/Dashboard'

Then you can wrap calls to loadDashboard in a function like this, to handle both scenarios:

function loadBundle (loaderFn, callback) {
  if (process.NODE_ENV == 'development') {
    // component is available immediately, since it didn't go through bundle-loader
    callback(loaderFn);
    return;
  }
  // component gets loaded through bundle-loader
  loaderFn(function(mod) {
    callback(mod.default ? mod.default : mod);
  });
}

and call it like:

loadBundle(loadDashboard, function (Dashboard) {
  // Dashboard component available for use!
});