refactor: migrate from react-loadable to @react-loadable/revised

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -92,9 +92,14 @@ declare module '@theme/Layout' {
 }
 
 declare module '@theme/Loading' {
-  import type {LoadingComponentProps} from 'react-loadable';
+  export interface Props {
+    // Type not separately exposed by react-loadable/revised
+    pastDelay: boolean;
+    error?: Error;
+    retry: () => void;
+  }
 
-  export default function Loading(props: LoadingComponentProps): JSX.Element;
+  export default function Loading(props: Props): JSX.Element;
 }
 
 declare module '@theme/NotFound' {

packages/docusaurus/package.json

@@ -44,10 +44,10 @@
     "@docusaurus/cssnano-preset": "2.0.0-beta.18",
     "@docusaurus/logger": "2.0.0-beta.18",
     "@docusaurus/mdx-loader": "2.0.0-beta.18",
-    "@docusaurus/react-loadable": "5.5.2",
     "@docusaurus/utils": "2.0.0-beta.18",
     "@docusaurus/utils-common": "2.0.0-beta.18",
     "@docusaurus/utils-validation": "2.0.0-beta.18",
+    "@react-loadable/revised": "0.0.26",
     "@slorber/static-site-generator-webpack-plugin": "^4.0.4",
     "@svgr/webpack": "^6.2.1",
     "autoprefixer": "^10.4.4",
@@ -83,7 +83,7 @@
     "prompts": "^2.4.2",
     "react-dev-utils": "^12.0.0",
     "react-helmet-async": "^1.2.3",
-    "react-loadable": "npm:@docusaurus/react-loadable@5.5.2",
+    "react-loadable": "npm:@react-loadable/[email protected]",
     "react-loadable-ssr-addon-v5-slorber": "^1.0.1",
     "react-router": "^5.2.0",
     "react-router-config": "^5.1.1",

packages/docusaurus/src/client/clientEntry.tsx

@@ -34,11 +34,13 @@ if (ExecutionEnvironment.canUseDOM) {
     process.env.NODE_ENV === 'production' ? ReactDOM.hydrate : ReactDOM.render;
   preload(routes, window.location.pathname).then(() => {
     renderMethod(
-      <HelmetProvider>
-        <BrowserRouter>
-          <App />
-        </BrowserRouter>
-      </HelmetProvider>,
+      <React.StrictMode>
+        <HelmetProvider>
+          <BrowserRouter>
+            <App />
+          </BrowserRouter>
+        </HelmetProvider>
+      </React.StrictMode>,
       document.getElementById('__docusaurus'),
     );
   });

packages/docusaurus/src/client/exports/ComponentCreator.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import Loadable from 'react-loadable';
+import Loadable, {LoadableMap} from 'react-loadable';
 import Loading from '@theme/Loading';
 import routesChunkNames from '@generated/routesChunkNames';
 import registry from '@generated/registry';
@@ -22,6 +22,7 @@ export default function ComponentCreator(
     return Loadable({
       loading: Loading,
       loader: () =>
+        // @ts-expect-error: check this API; probably bad lib def
         import('@theme/NotFound').then(({default: NotFound}) => (props) => (
           <RouteContextProvider
             // Do we want a better name than native-default?
@@ -55,9 +56,10 @@ export default function ComponentCreator(
     }
   });
 
-  return Loadable.Map({
+  return LoadableMap({
     loading: Loading,
     loader,
+    // @ts-expect-error: check this API
     modules,
     webpack: () => optsWebpack,
     render: (loaded, props) => {
@@ -68,39 +70,41 @@ export default function ComponentCreator(
       // each chunk name with its loaded module, so we don't create another
       // object from scratch.
       const loadedModules = JSON.parse(JSON.stringify(chunkNames));
-      Object.entries(loaded).forEach(([keyPath, loadedModule]) => {
-        // JSON modules are also loaded as `{ default: ... }` (`import()`
-        // semantics) but we just want to pass the actual value to props.
-        const chunk = loadedModule.default;
-        // One loaded chunk can only be one of two things: a module (props) or a
-        // component. Modules are always JSON, so `default` always exists. This
-        // could only happen with a user-defined component.
-        if (!chunk) {
-          throw new Error(
-            `The page component at ${path} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`,
-          );
-        }
-        // A module can be a primitive, for example, if the user stored a string
-        // as a prop. However, there seems to be a bug with swc-loader's CJS
-        // logic, in that it would load a JSON module with content "foo" as
-        // `{ default: "foo", 0: "f", 1: "o", 2: "o" }`. Just to be safe, we
-        // first make sure that the chunk is non-primitive.
-        if (typeof chunk === 'object' || typeof chunk === 'function') {
-          Object.keys(loadedModule)
-            .filter((k) => k !== 'default')
-            .forEach((nonDefaultKey) => {
-              chunk[nonDefaultKey] = loadedModule[nonDefaultKey];
-            });
-        }
-        // We now have this chunk prepared. Go down the key path and replace the
-        // chunk name with the actual chunk.
-        let val = loadedModules;
-        const keyPaths = keyPath.split('.');
-        keyPaths.slice(0, -1).forEach((k) => {
-          val = val[k];
-        });
-        val[keyPaths[keyPaths.length - 1]!] = chunk;
-      });
+      Object.entries(loaded).forEach(
+        ([keyPath, loadedModule]: [string, any]) => {
+          // JSON modules are also loaded as `{ default: ... }` (`import()`
+          // semantics) but we just want to pass the actual value to props.
+          const chunk = loadedModule.default;
+          // One loaded chunk can only be one of two things: a module (props) or a
+          // component. Modules are always JSON, so `default` always exists. This
+          // could only happen with a user-defined component.
+          if (!chunk) {
+            throw new Error(
+              `The page component at ${path} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`,
+            );
+          }
+          // A module can be a primitive, for example, if the user stored a string
+          // as a prop. However, there seems to be a bug with swc-loader's CJS
+          // logic, in that it would load a JSON module with content "foo" as
+          // `{ default: "foo", 0: "f", 1: "o", 2: "o" }`. Just to be safe, we
+          // first make sure that the chunk is non-primitive.
+          if (typeof chunk === 'object' || typeof chunk === 'function') {
+            Object.keys(loadedModule)
+              .filter((k) => k !== 'default')
+              .forEach((nonDefaultKey) => {
+                chunk[nonDefaultKey] = loadedModule[nonDefaultKey];
+              });
+          }
+          // We now have this chunk prepared. Go down the key path and replace the
+          // chunk name with the actual chunk.
+          let val = loadedModules;
+          const keyPaths = keyPath.split('.');
+          keyPaths.slice(0, -1).forEach((k) => {
+            val = val[k];
+          });
+          val[keyPaths[keyPaths.length - 1]!] = chunk;
+        },
+      );
 
       /* eslint-disable no-underscore-dangle */
       const Component = loadedModules.__comp;

packages/docusaurus/src/client/serverEntry.tsx

@@ -11,7 +11,7 @@ import {StaticRouter} from 'react-router-dom';
 import ReactDOMServer from 'react-dom/server';
 import {HelmetProvider, type FilledContext} from 'react-helmet-async';
 import {getBundles, type Manifest} from 'react-loadable-ssr-addon-v5-slorber';
-import Loadable from 'react-loadable';
+import {Capture} from 'react-loadable';
 
 import {minify} from 'html-minifier-terser';
 import path from 'path';
@@ -83,15 +83,17 @@ async function doRender(locals: Locals & {path: string}) {
 
   const linksCollector = createStatefulLinksCollector();
   const appHtml = ReactDOMServer.renderToString(
-    <Loadable.Capture report={(moduleName) => modules.add(moduleName)}>
-      <HelmetProvider context={helmetContext}>
-        <StaticRouter location={location} context={routerContext}>
-          <LinksCollectorProvider linksCollector={linksCollector}>
-            <App />
-          </LinksCollectorProvider>
-        </StaticRouter>
-      </HelmetProvider>
-    </Loadable.Capture>,
+    <React.StrictMode>
+      <Capture report={(moduleName) => modules.add(moduleName)}>
+        <HelmetProvider context={helmetContext}>
+          <StaticRouter location={location} context={routerContext}>
+            <LinksCollectorProvider linksCollector={linksCollector}>
+              <App />
+            </LinksCollectorProvider>
+          </StaticRouter>
+        </HelmetProvider>
+      </Capture>
+    </React.StrictMode>,
   );
   onLinksCollected(location, linksCollector.getCollectedLinks());
 

packages/docusaurus/src/client/theme-fallback/Loading/index.tsx

@@ -6,13 +6,13 @@
  */
 
 import React from 'react';
-import type {LoadingComponentProps} from 'react-loadable';
+import type {Props} from '@theme/Loading';
 
 export default function Loading({
   error,
   retry,
   pastDelay,
-}: LoadingComponentProps): JSX.Element | null {
+}: Props): JSX.Element | null {
   if (error) {
     return (
       <div

yarn.lock

@@ -3211,6 +3211,11 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
   integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
 
+"@react-loadable/[email protected]", "react-loadable@npm:@react-loadable/[email protected]":
+  version "0.0.26"
+  resolved "https://registry.yarnpkg.com/@react-loadable/revised/-/revised-0.0.26.tgz#3e260c16e4223be0f30910ecd8c513afea8f6819"
+  integrity sha512-p6qoeOJFC6Q21tdRD8zvzjtFfGejFCQRKVzzLB8934DZGubaMElNGsSJtw8Y3w5PzMLH02mXAV5VX9vwbYRmNQ==
+
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"