Migrate from react-loadable to loadable-components (or other alternatives)

[kvnxiao]

Currently, with react-loadable:

• react-loadable doesn't seem maintained anymore, just take a look at the "issues" list (open PRs for multitudes of fixes) dating back to 2018 https://github.com/jamiebuilds/react-loadable/pulls?q=is%3Apr+is%3Aopen+sort%3Aupdated-desc
• react-loadable does not support React 17.X.X due to it still referencing the deprecated and now removed/to-be-removed componentWillMount:

  eact-dom.development.js?61bb:67 Warning: componentWillMount has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
  
   Move code with side effects to componentDidMount, and set initial state in the constructor.
   Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
  
  lease update the following components: LoadableComponent
  

💥 Proposal

I haven't dived too deep into the Docusaurus codebase but it seems like even according to the official React docs here https://reactjs.org/docs/code-splitting.html#reactlazy, the recommended loadable in React with code-splitting support and SSR is loadable-components https://github.com/gregberge/loadable-components, which seems like something that should be moved towards to allow easy support of newer React versions.

Perhaps there are also other alternatives if the above mentioned one isn't ideal for whatever reason. Opening this issue for conversation on this topic.

Have you read the Contributing Guidelines on issues?

Yes

[slorber]

Thanks

You are right that we should find a future-proof solution to this problem.

It does not look so simple to do that switch, but it's on my plans to look at all this and ensure that we rely on modern/well-maintained deps that keep up with new React versions.

[hustcer]

+1

[slorber]

FYI next version will use React 17 by default, and I've published a fork of react-loadable to get rid of the dev deprecation warning.

https://github.com/facebook/docusaurus/pull/4218

We'll still have to migrate or find a solution to support React 18 though so I'll keep this issue open

[slorber]

Next.js 13.x + Webpack is apparently also using a fork of react-loadable: https://github.com/vercel/next.js/blob/canary/packages/next/src/shared/lib/loadable.tsx (I think they use Rust code when Turbo is enabled)

Today loadable-components does not look super maintained: few commits, and their docs still mention that React does not support Suspense for SSR/SSG, while it does now. But it looks like it may support Lazy better than our current solution: https://github.com/gregberge/loadable-components/pull/925

Are there good reasons to actually migrate anymore? It looks like we'd have to build/maintain our own fork or custom solution (like Next.js) in the future, and there's no more mainstream open-source lib to do that.