Code splitting/react-loadable issue

For the guys who got here because they're server side rendering app (server babel transpiled files) spitting out the error above, it may happen because you are using airbnb babel-plugin-dynamic-import-node without setting noInterop to false on .babelrc as below: { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

---

Don't pass jsx to loading key to Loadable component, provide valid react component.

const LoadableComponent = Loadable({
    loader: () => import('components/Shared/Logo/Logo'),
    loading: () => <div>loading</div>, // pass component, not jsx
});

Turns out that you need to pass a component to the loading option and not JSX. The documentation clearly says this, I just missed it.

Make sure to use default exports since when you import it's not using named exports: loader: () => import(/* webpackChunkName: "home" */ './Home')