react-loadable multiple resource loading not working

Question

To increase the site performance I was thinking of code splitting some of my components which I don't need at the initial build. After looking for some options I decided to go with react-loadable.

According to react-loadable docs, we can load multiple resources in parallel. With this idea and the example code given into the docs I was trying to implement a component which fetch the component as well as the data needed to render the component. But the problem that I'm facing is that every time I tried to use Loadable.Map function I'm getting an TypeError: loader is not a function in the console and only loading state is being shown. Did the docs is broken or My implementation?

score 2 · Accepted Answer · answered Dec 10 '18 at 16:08

The items in the loader object need to be functions

so change

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: fakeAPI()
  },

to

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: () => fakeAPI()
  },

or even

Loadable.Map({
  loader: {
    Post: () => import("./Post"),
    data: fakeAPI
  },

see updated demo : https://codesandbox.io/s/my19zqk78

react-loadable multiple resource loading not working

1 Answers1