getState changed its behaviour?

[stereobooster]

I have something like this in my code (I can post reproducible example later):

import { loadComponents, getState } from "loadable-components";

window.snapSaveState = () => getState();

loadComponents()
  .then(() => {
    ReactDOM.hydrate(wrap(App), root);
  })
  .catch(() => {
    ReactDOM.render(wrap(App), root);
  });

When I start dev server (or do prerendering) window.snapSaveState() always returns empty array ({__LOADABLE_STATE__: []}). Does getState work on the client side or is it only for server or I should look for error somewhere else?

[stereobooster]

Ok I figured out what happened. I used it like this

const NotFoundPage = loadable(
  () =>
    import(/* webpackChunkName: "NotFoundPage" */ "src/pages/NotFoundPage/NotFoundPage")
);

but instead it should be

const NotFoundPage = loadable(
  () =>
    import(/* webpackChunkName: "NotFoundPage" */ "src/pages/NotFoundPage/NotFoundPage"),
  { modules: ["NotFoundPage"] }
);

or use babel plugin. But I can not use second option because, I use un-ejected CRA project. Maybe babel-macro plugin instead of babel would work here. I wonder is there a way to make sure people aware of this issue, maybe console.warn if modules not passed?

[stereobooster]

I coded this macro for fun https://github.com/stereobooster/loadable-components.macro. It still needs some work, but mostly works. I can transmit this repo to you

[gregberge]

@stereobooster oh nice, we should put it back in the project!

[gregberge]

Loadable Components v3 has been released 🎉, please give a try.

👉 https://github.com/smooth-code/loadable-components