does 'react-loadable' excepts exact path to the component?

Question

I am making use of 'react-loadable' in my application to lazy load some of the components that I don't want to render as soon as application loads, currently I am following route based code splitting.

My file structure:

Contents of ignitus-About/Components/index.js are as follows:

export { default as About } from './About';

This is the code snippet of my lazy load AboutUs component:

const AboutUs = Loadable({
  loader: () => import('../ignitus-About/Components/About'),
  loading: Loading,
});

but what you will notice here is that I am writing exact/full path to the About component but inside my Components directory I only have 2 files one index.js and other About.js.

Here index.js is exporting About component by doing this:

export { default as About } from './About';

but when In my Loadable component I write this:

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components'),
      loading: Loading,
    });

It throws an error, so my Question is that does react-lodable expects exact path to the component if not then How can I export my About component from index.js in Loadable component.

entire codebase

So, when I lazy load my component like this:

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components/About'),
      loading: Loading,
    });

it works fine.

If I try lazy loading this like this:

 const AboutUs = Loadable({
      loader: () => import('../ignitus-About/Components'),
      loading: Loading,
    });

it throws an err:

index.js:1452 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

    Check the render method of `LoadableComponent`.
        in LoadableComponent (created by Route)
        in Route (at publicRoutes.js:56)
        in Switch (at publicRoutes.js:41)
        in div (at publicRoutes.js:39)
        in PublicRoutes (created by Route)
        in Route (at App.js:36)
        in Switch (at App.js:34)
        in div (at App.js:25)
        in App (at src/index.js:29)
        in Router (created by BrowserRouter)
        in BrowserRouter (at src/index.js:28)
        in Provider (at src/index.js:27)

Answer 1

The problem is your export { default as About } from './About'; statement. You're exporting no default, so when you use your statement here, it's seeing no default:

loader: () => import('../ignitus-About/Components'),

When the loadable component attempts to import your component, and initialize it with react, it's attempting to do so from the default export of ../ignitus-About/Components. This does not exist. How is the loader supposed to know that you want the About, and not say the Blog component from this import?

Whatever your import may be to loadable, it needs to be a single component. If you have multiple components, you need to use multiple react-loadable's.