How to use @loadable/server for meteor react apps

These docs work with webpack. I am trying to understand how can we use the same with meteor.

1 Like

Use my fork! Itโ€™s ported specifically to Meteor, so you donโ€™t have to worry about webpack configuration. :slight_smile:

3 Likes

Currenly using @captainnโ€™s fork and it is working flawlessly for us

Cool! I was using nemms:meteor-react-loadable before, but considering that it is just a wrapper over react-loadable and the react-lodabale dev has become mostly unavailable for regular updates, it has become a bit unusable.
@captainnโ€™s fork is a great alternative. Everythingโ€™s working after a few minor changes.

Iโ€™d love to hear more about your experience implementing it, and the minor changes you had to implement. My aim is to make it as easy as possible to set this all up.

I meant the changes in the code that I was using to work with the older nemms package. Both you and nemms follow more or less the same api structure, except for the function name changes, so the changes were minimum.

Did not have to do any changes from your Readme (except from using await instead of .then for preLoadables).

Awesome! I tried to keep the API compatible with the main Loadable package as much as possible. Glad to hear it worked out!

What subtle changes have you made? Can you share๏ผŒthanks :ๅพฎ็ฌ‘:

https://github.com/CaptainN/npdev-react-loadable works fine. Please go through the ReadMe and it should work out of the box.

If you were using loadable-components earlier, just the function name changes with proper imports should work.

Once the page loads, meteor sets up the data connection, then renders the page. This first rendering occurs before the data connection has returned any data, so it renders an empty list of animals LiteBlue

@captainn Thank your very much! Exactly what I was looking for for a long time!

Meteor 1.10 or above does not seem to be supported. Something has gone wrong. Is there anyone like me who has encountered this problem

I used meteor 1.10.1 and Apollo client 3

Iโ€™m using meteor 1.10.1 with it just fine. Can you post some additional details?

Iโ€™m using Meteor 1.10.1 as well.

@captainn I have a question regarding SSR. I use Meteor server-render and your package. I did some code splitting by route. The bundle size was minimized. But if I see correctly all the ressources are preloaded. First is the js bundle loaded and then dynamic-import is triggered to preload all other routes. In sum I do not see any performance benefits, because of the preloading of all ressources. Is this the expectation how it should work? Is it possible to load only the ressources, which are required for the url being accessed and to start the laod on the client side when the user navigates to that route?

It seems to be my problem. I re-deleted node_modules and package-lock-json, and used meteor npm install to reinstall and deploy. The problem was solved๏ผŒ Great meteor pack, thank you for your selfless contribution

1 Like

It should not be preloading anything, unless you have appcache installed. If you do that that installed, there is still a benefit to code splitting. With preloading, it would follow this sequence:

  1. Load minimum of things necessary to start the app.
  2. Start the app - now the user can interact faster than having to wait for everything.
  3. Preload all the rest of the modules for every route, so the app works offline. No impact on startup speed.

If SSR is configured correctly, it does the same, except is has an additional manifest of Loadables to load at step 1 before the app starts, so that it can hydrate (only the Loadables for the given route).

If you are using offline tech like appcache you want #3, because otherwise, your additional routes would not be viable offline. If you are not using appcache and things are preloading, that might be bug somewhere, but probably not in my package, since does not handle any of that. All it does is import whatever packages using the dynamic import system whenever the configured โ€œLoadableโ€ is mounted. It will not run the importer until the Loadable is mounted, so the trick is to avoid having it mounted until you actually need it. Itโ€™s possible that you have configured something incorrectly. Iโ€™d need to see some code to check that out.

I do not use appcache. What I see is exactly what you descibed in your sequence. First is the js-file loaded and after that is https://wwwโ€ฆcom/meteor/dynamic-import/fetch requested and all the code for the loadables is loaded.

Do you have an idea what might cause this?

Might be a dependency of another package you are using. Run meteor list --tree and check if app-cache is in there somewhere.

dynamic-import@0.5.1
โ”œโ”€โ”ฌ fetch@0.1.1
โ”‚ โ”œโ”€โ”ฌ modern-browsers@0.1.5
โ”‚ โ”‚ โ””โ”€โ”ฌ modules@0.15.0
โ”‚ โ”‚   โ””โ”€โ”€ modules-runtime@0.12.0
โ”‚ โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ”‚ โ””โ”€โ”ฌ promise@0.11.2
โ”‚   โ”œโ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”‚   โ””โ”€โ”€ modules@0.15.0 (expanded above)
โ”œโ”€โ”ฌ inter-process-messaging@0.1.1
โ”‚ โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ”‚ โ””โ”€โ”€ promise@0.11.2 (expanded above)
โ”œโ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ””โ”€โ”€ promise@0.11.2 (expanded above)
ecmascript@0.14.2
โ”œโ”€โ”ฌ babel-compiler@7.5.2
โ”‚ โ”œโ”€โ”ฌ ecmascript-runtime@0.7.0
โ”‚ โ”‚ โ”œโ”€โ”ฌ ecmascript-runtime-client@0.10.0
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ promise@0.11.2 (expanded above)
โ”‚ โ”‚ โ””โ”€โ”ฌ ecmascript-runtime-server@0.9.0
โ”‚ โ”‚   โ””โ”€โ”€ modules@0.15.0 (expanded above)
โ”‚ โ””โ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”œโ”€โ”ฌ babel-runtime@1.5.0
โ”‚ โ””โ”€โ”€ modules@0.15.0 (expanded above)
โ”œโ”€โ”€ dynamic-import@0.5.1 (top level)
โ”œโ”€โ”€ ecmascript-runtime@0.7.0 (expanded above)
โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ””โ”€โ”€ promise@0.11.2 (expanded above)
email@1.2.3
es5-shim@4.8.0
โ””โ”€โ”€ modules@0.15.0 (expanded above)
http@1.4.2
โ”œโ”€โ”€ modules@0.15.0 (expanded above)
โ””โ”€โ”ฌ url@1.2.0
  โ””โ”€โ”€ modules@0.15.0 (expanded above)
less@2.8.0
โ”œโ”€โ”ฌ caching-compiler@1.2.1
โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ””โ”€โ”ฌ random@1.2.0
โ”‚   โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ””โ”€โ”€ underscore@1.0.10
meteor-base@1.4.0
โ”œโ”€โ”ฌ ddp@1.4.0
โ”‚ โ”œโ”€โ”ฌ ddp-client@2.3.3
โ”‚ โ”‚ โ”œโ”€โ”ฌ callback-hook@1.3.0
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”ฌ check@1.3.1
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”ฌ ejson@1.1.1
โ”‚ โ”‚ โ”‚   โ”œโ”€โ”ฌ base64@1.0.12
โ”‚ โ”‚ โ”‚   โ”‚ โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚   โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”ฌ ddp-common@1.4.0
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ check@1.3.1 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ random@1.2.0 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”ฌ retry@1.1.0
โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ random@1.2.0 (expanded above)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ tracker@1.2.0 (top level)
โ”‚ โ”‚ โ”œโ”€โ”ฌ diff-sequence@1.1.1
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”ฌ id-map@1.1.0
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”ฌ mongo-id@1.0.7
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ id-map@1.1.0 (expanded above)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ random@1.2.0 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ random@1.2.0 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”ฌ reload@1.3.0
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”€ retry@1.1.0 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”ฌ socket-stream-client@0.2.3
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ retry@1.1.0 (expanded above)
โ”‚ โ”‚ โ””โ”€โ”€ tracker@1.2.0 (top level)
โ”‚ โ””โ”€โ”ฌ ddp-server@2.3.1
โ”‚   โ”œโ”€โ”€ callback-hook@1.3.0 (expanded above)
โ”‚   โ”œโ”€โ”€ check@1.3.1 (expanded above)
โ”‚   โ”œโ”€โ”€ ddp-client@2.3.3 (expanded above)
โ”‚   โ”œโ”€โ”€ ddp-common@1.4.0 (expanded above)
โ”‚   โ”œโ”€โ”€ diff-sequence@1.1.1 (expanded above)
โ”‚   โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚   โ”œโ”€โ”€ mongo-id@1.0.7 (expanded above)
โ”‚   โ”œโ”€โ”€ random@1.2.0 (expanded above)
โ”‚   โ”œโ”€โ”€ retry@1.1.0 (expanded above)
โ”‚   โ”œโ”€โ”ฌ stream-server@2.2.0
โ”‚   โ”‚ โ”œโ”€โ”ฌ routepolicy@1.1.0
โ”‚   โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”‚ โ”‚ โ”œโ”€โ”€ underscore@1.0.10
โ”‚   โ”‚ โ”‚ โ””โ”€โ”ฌ webapp@1.9.0
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”ฌ boilerplate-generator@1.7.0
โ”‚   โ”‚ โ”‚   โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”‚ โ”‚   โ”‚ โ””โ”€โ”€ underscore@1.0.10
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”€ inter-process-messaging@0.1.1 (expanded above)
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”ฌ logging@1.1.20
โ”‚   โ”‚ โ”‚   โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”‚ โ”‚   โ”‚ โ”œโ”€โ”€ ecmascript-runtime-client@0.10.0 (expanded above)
โ”‚   โ”‚ โ”‚   โ”‚ โ””โ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”€ modern-browsers@0.1.5 (expanded above)
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”€ routepolicy@1.1.0 (expanded above)
โ”‚   โ”‚ โ”‚   โ”œโ”€โ”€ underscore@1.0.10
โ”‚   โ”‚ โ”‚   โ””โ”€โ”ฌ webapp-hashing@1.0.9
โ”‚   โ”‚ โ”‚     โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”‚ โ”‚     โ””โ”€โ”€ underscore@1.0.10
โ”‚   โ”‚ โ””โ”€โ”€ webapp@1.9.0 (expanded above)
โ”‚   โ””โ”€โ”€ underscore@1.0.10
โ”œโ”€โ”€ es5-shim@4.8.0 (top level)
โ”œโ”€โ”ฌ hot-code-push@1.0.4
โ”‚ โ”œโ”€โ”ฌ autoupdate@1.6.0
โ”‚ โ”‚ โ”œโ”€โ”€ check@1.3.1 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ ddp@1.4.0 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”€ inter-process-messaging@0.1.1 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ retry@1.1.0 (expanded above)
โ”‚ โ”‚ โ”œโ”€โ”€ tracker@1.2.0 (top level)
โ”‚ โ”‚ โ””โ”€โ”€ webapp@1.9.0 (expanded above)
โ”‚ โ””โ”€โ”€ reload@1.3.0 (expanded above)
โ”œโ”€โ”ฌ livedata@1.0.18
โ”‚ โ””โ”€โ”€ ddp@1.4.0 (expanded above)
โ””โ”€โ”€ webapp@1.9.0 (expanded above)
mixmax:smart-disconnect@0.0.4
mobile-experience@1.1.0
โ”œโ”€โ”€ launch-screen@1.2.0
โ””โ”€โ”€ mobile-status-bar@1.1.0
mongo@1.9.0
โ”œโ”€โ”ฌ allow-deny@1.1.0
โ”‚ โ”œโ”€โ”€ check@1.3.1 (expanded above)
โ”‚ โ”œโ”€โ”€ ddp@1.4.0 (expanded above)
โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚ โ””โ”€โ”ฌ minimongo@1.5.0
โ”‚   โ”œโ”€โ”€ diff-sequence@1.1.1 (expanded above)
โ”‚   โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”‚   โ”œโ”€โ”ฌ geojson-utils@1.0.10
โ”‚   โ”‚ โ””โ”€โ”€ modules@0.15.0 (expanded above)
โ”‚   โ”œโ”€โ”€ id-map@1.1.0 (expanded above)
โ”‚   โ”œโ”€โ”€ mongo-id@1.0.7 (expanded above)
โ”‚   โ”œโ”€โ”ฌ ordered-dict@1.1.0
โ”‚   โ”‚ โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚   โ”œโ”€โ”€ random@1.2.0 (expanded above)
โ”‚   โ””โ”€โ”€ tracker@1.2.0 (top level)
โ”œโ”€โ”ฌ binary-heap@1.0.11
โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ””โ”€โ”€ id-map@1.1.0 (expanded above)
โ”œโ”€โ”€ callback-hook@1.3.0 (expanded above)
โ”œโ”€โ”€ check@1.3.1 (expanded above)
โ”œโ”€โ”€ ddp@1.4.0 (expanded above)
โ”œโ”€โ”€ diff-sequence@1.1.1 (expanded above)
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”œโ”€โ”€ ejson@1.1.1 (expanded above)
โ”œโ”€โ”€ minimongo@1.5.0 (expanded above)
โ”œโ”€โ”ฌ mongo-decimal@0.1.1
โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ””โ”€โ”€ ejson@1.1.1 (expanded above)
โ”œโ”€โ”ฌ mongo-dev-server@1.1.0
โ”‚ โ””โ”€โ”€ modules@0.15.0 (expanded above)
โ”œโ”€โ”€ mongo-id@1.0.7 (expanded above)
โ”œโ”€โ”€ npm-mongo@3.7.0
โ”œโ”€โ”€ random@1.2.0 (expanded above)
โ”œโ”€โ”€ tracker@1.2.0 (top level)
โ””โ”€โ”€ underscore@1.0.10
npdev:react-loadable@1.0.0-beta.1
โ””โ”€โ”€ ecmascript@0.14.2 (top level)
react-meteor-data@0.2.16
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”œโ”€โ”ฌ tmeasday:check-npm-versions@0.3.2
โ”‚ โ””โ”€โ”€ ecmascript@0.14.2 (top level)
โ””โ”€โ”€ tracker@1.2.0 (top level)
reactive-var@1.0.11
โ””โ”€โ”€ tracker@1.2.0 (top level)
sakulstra:aggregate@1.4.3
โ””โ”€โ”€ mongo@1.9.0 (top level)
server-render@0.3.1
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ””โ”€โ”€ webapp@1.9.0 (expanded above)
shell-server@0.5.0
โ””โ”€โ”€ ecmascript@0.14.2 (top level)
standard-minifier-js@2.6.0
โ”œโ”€โ”€ babel-compiler@7.5.2 (expanded above)
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ””โ”€โ”ฌ minifier-js@2.6.0
  โ””โ”€โ”€ babel-compiler@7.5.2 (expanded above)
static-html@1.2.2
โ”œโ”€โ”ฌ caching-html-compiler@1.1.3
โ”‚ โ”œโ”€โ”€ caching-compiler@1.2.1 (expanded above)
โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”œโ”€โ”ฌ templating-tools@1.1.2
โ”‚ โ”‚ โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”‚ โ”‚ โ”œโ”€โ”ฌ spacebars-compiler@1.1.3
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”ฌ blaze-tools@1.0.10
โ”‚ โ”‚ โ”‚ โ”‚ โ”œโ”€โ”ฌ htmljs@1.0.11
โ”‚ โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”ฌ deps@1.0.12
โ”‚ โ”‚ โ”‚ โ”‚ โ”‚   โ””โ”€โ”€ tracker@1.2.0 (top level)
โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ underscore@1.0.10
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”ฌ html-tools@1.0.11
โ”‚ โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ htmljs@1.0.11 (expanded above)
โ”‚ โ”‚ โ”‚ โ”œโ”€โ”€ htmljs@1.0.11 (expanded above)
โ”‚ โ”‚ โ”‚ โ””โ”€โ”€ underscore@1.0.10
โ”‚ โ”‚ โ””โ”€โ”€ underscore@1.0.10
โ”‚ โ””โ”€โ”€ underscore@1.0.10
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”œโ”€โ”€ templating-tools@1.1.2 (expanded above)
โ””โ”€โ”€ underscore@1.0.10
stream-server-uws@0.5.1
โ”œโ”€โ”€ disable-sockjs@0.0.1
โ”œโ”€โ”€ ecmascript@0.14.2 (top level)
โ”œโ”€โ”€ routepolicy@1.1.0 (expanded above)
โ””โ”€โ”€ webapp@1.9.0 (expanded above)
tracker@1.2.0
โ””โ”€โ”€ ecmascript@0.14.2 (top level)
underscore@1.0.10

Looks like this is not the case here.

I have the same issue