javascriptreactjsoptimizationcode-splittingreact-loadable

react-loadable multiple resource loading not working

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?

Solution

  • 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