NPDev React Loadable

announce
13

Sure! I could use some help cherry picking them though. Most of the improvements are to the webpack surface of that package - but we don’t need any of that. I do see one error swallowing fix that I can apply (I’ll verify it’s an issue, and then port the fix over).

If you see any others let me know through an issue or PR, and I’ll incorporate it.

3 Likes
14

Actually I think that error swallowing fix is superfluous - the error is already captured in the load method, making this unnecessary (at least in my version).

16

You can configure the babel plugin to get those meteor settings included automatically (Note: Not yet tested with LoadableMap).

1 Like
17

@captainn, what is this? https://github.com/facebook/react/edit/master/packages/react-dom/src/tests/ReactDOMServerPartialHydration-test.internal.js
Looks like a new feature supports server rendering.

18

That’s neat. I wonder if they are building up to supporting React.lazy in SSR (they don’t currently, which is why we still need React Loadable).

2 Likes
19

Trying it out now, no issues so far,

2 Likes
20

Hi, I tried multiple levels of loadable call then the client crashed.
meteor://:computer:app/packages/npdev:react-loadable/react-loadable-both.js

  while (initializers.length) {
    const init = initializers.pop()
    promises.push(init()) // error here.
  }
21

I wonder if there’s some null values working their way in to that list. Can you add a reproduction, perhaps as a PR to this starter?

1 Like
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?