-
-
Notifications
You must be signed in to change notification settings - Fork 8.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: migrate from react-loadable to @react-loadable/revised #6581
Conversation
I forgot to do this before. Signed-off-by: Shinwon Elizabeth Yoon <[email protected]>
Both unforked react-loadable and @docusaurus/react-loadable uses legacy React APIs. However, @react-loadable/revised (https://github.com/react-loadable/revised) is actively maintained and widely used in production, thus replaced with this package. Signed-off-by: Shinwon Elizabeth Yoon <[email protected]>
Signed-off-by: Shinwon Elizabeth Yoon <[email protected]>
Not sure if it even works... There are API changes between the revised version and the original version, and we have an addon that I have no idea if is impacted by this migration. |
Try modifying these lines:
To this: diff --git a/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx b/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
index 761c9c3a7..97cbac153 100644
--- a/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
+++ b/packages/docusaurus/src/client/theme-fallback/Loading/index.tsx
@@ -5,14 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+
import React from 'react';
-import type {LoadingComponentProps} from 'react-loadable';
export default function Loading({
- error,
- retry,
+ // @ts-ignore
+ error, // @ts-ignore
+ retry, // @ts-ignore
pastDelay,
-}: LoadingComponentProps): JSX.Element | null {
+}): JSX.Element | null {
if (error) {
return (
<div
This works for me, but let me know if something needs to be improved |
@seyoon20087 Adding |
|
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site settings. |
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-6581--docusaurus-2.netlify.app/ |
Size Change: +3.79 kB (0%) Total Size: 807 kB
ℹ️ View Unchanged
|
@Josh-Cena do we even still need a lib with React 18? I'd like to figure out how to remove this. React.lazy() now has support for Server-Side-Rendering
The v17 warning + suggestion to use loadable components was removed, so I guess our setup could be simplified 🤷♂️ The doc is not so clear about the behavior of React.lazy() with server-side-rendering behavior though, but I guess it will not show suspense placeholders and just load appropriately the lazy components? Will try to get answers |
React.lazy doesn't work with SSG. See https://loadable-components.com/docs/loadable-vs-react-lazy/ |
React.lazy did not work with SSG, but in React 18 it does (loadable components doc has probably not been updated since) Confirmed by React itself :D https://twitter.com/reactjs/status/1511755578716028928 |
Motivation
Continuation of #6306. Close #3841
Have you read the Contributing Guidelines on pull requests?
Yes
Test Plan
TODO