NPDev React Loadable

announce
22

Because of the server returns the level 2 loadable files, in the client side the loadable preloadLoadables() script try to load them, but it doesn’t exist in INITIALIZERS_BY_MODULE array. Then this function will return an undefined rersult

const preload = (preloadables) => {
  const initializers = preloadables.map(preloadable => {
    return INITIALIZERS_BY_MODULE[preloadable]
  })
  return flushInitializers(initializers)
}

When the function flushInitializers was called with an array of initializers which has undefined element, the init is not function. The client crash here.

export function flushInitializers (initializers) {
  const promises = []

  while (initializers.length) {
    const init = initializers.pop()
    promises.push(init())
  }

  return Promise.all(promises).then(() => {
    if (initializers.length) {
      return flushInitializers(initializers)
    }
  })
}
23

I’ve just found some interesting thing. If I try to load the multiple level loadable page right at the begining (press f5 key), then the error occurred.
But if I try to load another page then go to that page again then no error occurs.

24

What does your loadable setup look like - are you using the babel plugin?

There may be a flaw in the way the Loadables are registered. I think I solved this in svelte-loadable by checking if a module has already been loaded, and using that if it has - but I don’t know what happens in this case (this is a port - I should have made more of an effort to rewrite it in some way I understand).

25

I don’t use babel plugin. Currently I use a wrapper component to load Loadable. I will try to remove the wrapper and test again.

26

A wrapper component will only effect the babel plugin - should be fine to use it without. But can you show some code? I’m looking specifically to see what the meteor value is.

1 Like
27

I will create a github repository.

28

@captainn @storyteller

I hope to get your help. Have a look

Once you’ve solved the overload flicker problem, the package is perfect :joy:

29

I came across this package yesterday looking for ways to stop using react-loadable. Great idea! But I somehow can’t get this to work.

I’ve done meteor add npdev:react-loadable. I’ve tried also git clone-ing the repo to my packages folder. I’ve tried with and without the babel plugin.

The error message on startup begins with Error: Cannot find package "npdev:react-loadable". Try "meteor add npdev:react-loadable". Which I’ve done, as I said.

Any ideas on what’s going wrong?

30

I need to get that in release shape (some of the Loadable.Map stuff just needs testing with SSR). Try this:

meteor add npdev:react-loadable@1.0.0-beta.3
31

Thanks, but still no dice. Could be something unusual with my setup. So for now going back to, um, pretending to ignore all the warnings to Rename componentWillMount to UNSAFE_componentWillMount…

32

Cannot install it either in my app, I even tried to clone it locally :confused: Install is ok, but the package is never found within the application.

33

You should (as of Sept 2021) be able to just run meteor add npdev:react-loadable - does that not work?