Temporarily disable react-loadable

Question

When using react-loadable, you aren't easily alerted by errors thrown in those async components, like a bad import.

I'd like to be able to disable react-loadable in dev environment (bypass it, and load everything synchronously) and enable it in production, but I don't know how to override react-loadable to make this work:

import Loadable from 'react-loadable';
import LoadingComponent from './Loading';

// My reused loadable component everywhere
// In production
export default options =>
  Loadable({
  loading: LoadingComponent,
  delay: 200,
  ...options,
});

// Ideally a dev version that skips loadable
// In development, without any async import
export default options => options.loader(); // Does not work

Is there a way to do this?

Answer 1

You could try exporting one or the other function based on the running state by doing something like this:

import Loadable from 'react-loadable';
import LoadingComponent from './Loading';

let fn = options => Loadable({
    loading: LoadingComponent,
    delay: 200,
    ...options,
})

if (process.env.NODE_ENV !== 'production') {
    fn = options => Loadable({
         loading: () => null,
    });
}

export default fn;

The loading: () => null option is needed to not render anything.

Now you could use the NODE_ENV environmental variable to load or not load the Loadable.

Answer 2

The short answer is 'no'. I think you would have to rewrite to much code. You could however set up a dev environment with server side rendering, react-loadable is synchronous when SSR.

Use the argument serverSideRequirePath

This is the example usages from this article

import path from 'path';

const LoadableAnotherComponent = Loadable({
  loader: () => import('./another-component'),
  LoadingComponent: MyLoadingComponent,
  delay: 200,
  serverSideRequirePath: path.join(__dirname, './another-component')
});