CODEWITHSUNDEEP
javascriptreactjsoptimizationcode-splittingreact-loadable
Aziz
Aziz

Reputation: 1018

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?

Upvotes: 0

Views: 1040

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196256

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

Upvotes: 2

Related Questions