@docusaurus/core 2.0.0-beta.12faed89d → 2.0.0-beta.14

package/lib/client/exports/BrowserOnly.js

@@ -5,10 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+// Similar comp to the one described here:
+// https://www.joshwcomeau.com/react/the-perils-of-rehydration/#abstractions
 function BrowserOnly({ children, fallback, }) {
-    const { isClient } = useDocusaurusContext();
-    if (isClient && children != null) {
+    const isBrowser = useIsBrowser();
+    if (isBrowser && children != null) {
         return React.createElement(React.Fragment, null, children());
     }
     return fallback || null;

package/lib/client/exports/ErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/// <reference types="@docusaurus/module-type-aliases" />
+import React, { ReactNode } from 'react';
+import type { Props } from '@docusaurus/ErrorBoundary';
+interface State {
+    error: Error | null;
+}
+declare class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props);
+    componentDidCatch(error: Error): void;
+    render(): ReactNode;
+}
+export default ErrorBoundary;

package/lib/client/exports/ErrorBoundary.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import DefaultFallback from '@theme/Error';
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { error: null };
+    }
+    componentDidCatch(error) {
+        // Catch errors in any components below and re-render with error message
+        if (ExecutionEnvironment.canUseDOM) {
+            this.setState({ error });
+        }
+    }
+    render() {
+        var _a;
+        const { children } = this.props;
+        const { error } = this.state;
+        if (error) {
+            const fallback = (_a = this.props.fallback) !== null && _a !== void 0 ? _a : DefaultFallback;
+            return fallback({
+                error,
+                tryAgain: () => this.setState({ error: null }),
+            });
+        }
+        return children;
+    }
+}
+export default ErrorBoundary;

package/lib/client/exports/Interpolate.js

@@ -16,7 +16,7 @@ export function interpolate(text, values) {
     const elements = [];
     const processedText = text.replace(ValueRegexp, (match) => {
         // remove {{ and }} around the placeholder
-        const key = match.substr(1, match.length - 2);
+        const key = match.substring(1, match.length - 1);
         const value = values === null || values === void 0 ? void 0 : values[key];
         if (typeof value !== 'undefined') {
             const element = React.isValidElement(value)
@@ -38,25 +38,22 @@ export function interpolate(text, values) {
     else if (elements.every((el) => typeof el === 'string')) {
         return processedText
             .split(ValueFoundMarker)
-            .reduce((str, value, index) => {
-            var _a;
-            return str.concat(value).concat((_a = elements[index]) !== null && _a !== void 0 ? _a : '');
-        }, '');
+            .reduce((str, value, index) => { var _a; return str.concat(value).concat((_a = elements[index]) !== null && _a !== void 0 ? _a : ''); }, '');
     }
     // JSX interpolation: returns ReactNode
     else {
-        return processedText
-            .split(ValueFoundMarker)
-            .reduce((array, value, index) => {
-            return [
-                ...array,
-                React.createElement(React.Fragment, { key: index },
-                    value,
-                    elements[index]),
-            ];
-        }, []);
+        return processedText.split(ValueFoundMarker).reduce((array, value, index) => [
+            ...array,
+            React.createElement(React.Fragment, { key: index },
+                value,
+                elements[index]),
+        ], []);
     }
 }
 export default function Interpolate({ children, values, }) {
+    if (typeof children !== 'string') {
+        console.warn('Illegal <Interpolate> children', children);
+        throw new Error('The Docusaurus <Interpolate> component only accept simple string values');
+    }
     return interpolate(children, values);
 }

package/lib/client/exports/Link.js

@@ -50,25 +50,25 @@ function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLi
         targetLink = applyTrailingSlash(targetLink, { trailingSlash, baseUrl });
     }
     const preloaded = useRef(false);
-    const LinkComponent = isNavLink ? NavLink : RRLink;
+    const LinkComponent = (isNavLink ? NavLink : RRLink);
     const IOSupported = ExecutionEnvironment.canUseIntersectionObserver;
-    let io;
+    const ioRef = useRef();
     const handleIntersection = (el, cb) => {
-        io = new window.IntersectionObserver((entries) => {
+        ioRef.current = new window.IntersectionObserver((entries) => {
             entries.forEach((entry) => {
                 if (el === entry.target) {
                     // If element is in viewport, stop listening/observing and run callback.
                     // https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
                     if (entry.isIntersecting || entry.intersectionRatio > 0) {
-                        io.unobserve(el);
-                        io.disconnect();
+                        ioRef.current.unobserve(el);
+                        ioRef.current.disconnect();
                         cb();
                     }
                 }
             });
         });
         // Add element to the observer.
-        io.observe(el);
+        ioRef.current.observe(el);
     };
     const handleRef = (ref) => {
         if (IOSupported && ref && isInternal) {
@@ -95,11 +95,11 @@ function Link({ isNavLink, to, href, activeClassName, isActive, 'data-noBrokenLi
         }
         // When unmounting, stop intersection observer from watching.
         return () => {
-            if (IOSupported && io) {
-                io.disconnect();
+            if (IOSupported && ioRef.current) {
+                ioRef.current.disconnect();
             }
         };
-    }, [targetLink, IOSupported, isInternal]);
+    }, [ioRef, targetLink, IOSupported, isInternal]);
     const isAnchorLink = (_a = targetLink === null || targetLink === void 0 ? void 0 : targetLink.startsWith('#')) !== null && _a !== void 0 ? _a : false;
     const isRegularHtmlLink = !targetLink || !isInternal || isAnchorLink;
     if (targetLink && isInternal && !isAnchorLink && !noBrokenLinkCheck) {

package/lib/client/exports/Translate.d.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference types="@docusaurus/module-type-aliases" />
-/// <reference types="react" />
+import { ReactNode } from 'react';
 import { InterpolateValues } from '@docusaurus/Interpolate';
 import type { TranslateParam, TranslateProps } from '@docusaurus/Translate';
 export declare function translate<Str extends string>({ message, id }: TranslateParam<Str>, values?: InterpolateValues<Str, string | number>): string;
-export default function Translate<Str extends string>({ children, id, values, }: TranslateProps<Str>): JSX.Element;
+export default function Translate<Str extends string>({ children, id, values, }: TranslateProps<Str>): ReactNode;

package/lib/client/exports/Translate.js

@@ -4,26 +4,30 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import Interpolate, { interpolate, } from '@docusaurus/Interpolate';
+import { interpolate } from '@docusaurus/Interpolate';
 // Can't read it from context, due to exposing imperative API
 import codeTranslations from '@generated/codeTranslations';
 function getLocalizedMessage({ id, message, }) {
-    var _a;
-    return (_a = codeTranslations[id !== null && id !== void 0 ? id : message]) !== null && _a !== void 0 ? _a : message;
+    var _a, _b;
+    if (typeof id === 'undefined' && typeof message === 'undefined') {
+        throw new Error('Docusaurus translation declarations must have at least a translation id or a default translation message');
+    }
+    return (_b = (_a = codeTranslations[(id !== null && id !== void 0 ? id : message)]) !== null && _a !== void 0 ? _a : message) !== null && _b !== void 0 ? _b : id;
 }
 // Imperative translation API is useful for some edge-cases:
 // - translating page titles (meta)
 // - translating string props (input placeholders, image alt, aria labels...)
 export function translate({ message, id }, values) {
-    var _a;
-    const localizedMessage = (_a = getLocalizedMessage({ message, id })) !== null && _a !== void 0 ? _a : message;
+    const localizedMessage = getLocalizedMessage({ message, id });
     return interpolate(localizedMessage, values);
 }
 // Maybe we'll want to improve this component with additional features
 // Like toggling a translation mode that adds a little translation button near the text?
 export default function Translate({ children, id, values, }) {
-    var _a;
-    const localizedMessage = (_a = getLocalizedMessage({ message: children, id })) !== null && _a !== void 0 ? _a : children;
-    return React.createElement(Interpolate, { values: values }, localizedMessage);
+    if (children && typeof children !== 'string') {
+        console.warn('Illegal <Translate> children', children);
+        throw new Error('The Docusaurus <Translate> component only accept simple string values');
+    }
+    const localizedMessage = getLocalizedMessage({ message: children, id });
+    return interpolate(localizedMessage, values);
 }

package/lib/client/exports/browserContext.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+export declare const Context: React.Context<boolean>;
+export declare function BrowserContextProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/client/exports/browserContext.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useEffect, useState } from 'react';
+// Encapsulate the logic to avoid React hydration problems
+// See https://www.joshwcomeau.com/react/the-perils-of-rehydration/
+// On first client-side render, we need to render exactly as the server rendered
+// isBrowser is set to true only after a successful hydration
+// Note, isBrowser is not part of useDocusaurusContext() for perf reasons
+// Using useDocusaurusContext() (much more common need) should not trigger re-rendering after a successful hydration
+export const Context = React.createContext(false);
+export function BrowserContextProvider({ children, }) {
+    const [isBrowser, setIsBrowser] = useState(false);
+    useEffect(() => {
+        setIsBrowser(true);
+    }, []);
+    return React.createElement(Context.Provider, { value: isBrowser }, children);
+}

package/lib/client/exports/constants.js

@@ -4,15 +4,5 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-/*
-// eslint-disable-next-line no-restricted-imports
-export {
-  // constants were only available on node
-  // this makes some useful constants available to frontend/themes too
-  // import {DEFAULT_PLUGIN_ID} '@docusaurus/constants'
-  DEFAULT_PLUGIN_ID,
-} from '../../constants';
- */
-// Not duplicating the constants seems to produce
-// weird TS compilation side-effects
+// Constants used on the client-side: duplicated from server-side code
 export const DEFAULT_PLUGIN_ID = 'default';

package/lib/client/exports/{context.d.ts → docusaurusContext.d.ts}

@@ -4,7 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { DocusaurusContext } from '@docusaurus/types';
-declare const _default: React.Context<DocusaurusContext | null>;
-export default _default;
+export declare const Context: React.Context<DocusaurusContext>;
+export declare function DocusaurusContextProvider({ children, }: {
+    children: ReactNode;
+}): JSX.Element;

package/lib/client/exports/docusaurusContext.js

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import siteConfig from '@generated/docusaurus.config';
+import globalData from '@generated/globalData';
+import i18n from '@generated/i18n';
+import codeTranslations from '@generated/codeTranslations';
+import siteMetadata from '@generated/site-metadata';
+// Static value on purpose: don't make it dynamic!
+// Using context is still useful for testability reasons.
+const contextValue = {
+    siteConfig,
+    siteMetadata,
+    globalData,
+    i18n,
+    codeTranslations,
+};
+export const Context = React.createContext(contextValue);
+export function DocusaurusContextProvider({ children, }) {
+    return React.createElement(Context.Provider, { value: contextValue }, children);
+}

package/lib/client/exports/useBaseUrl.js

@@ -27,11 +27,9 @@ function addBaseUrl(siteUrl, baseUrl, url, { forcePrependBaseUrl = false, absolu
     return absolute ? siteUrl + basePath : basePath;
 }
 export function useBaseUrlUtils() {
-    const { siteConfig: { baseUrl = '/', url: siteUrl } = {}, } = useDocusaurusContext();
+    const { siteConfig: { baseUrl = '/', url: siteUrl } = {} } = useDocusaurusContext();
     return {
-        withBaseUrl: (url, options) => {
-            return addBaseUrl(siteUrl, baseUrl, url, options);
-        },
+        withBaseUrl: (url, options) => addBaseUrl(siteUrl, baseUrl, url, options),
     };
 }
 export default function useBaseUrl(url, options = {}) {

package/lib/client/exports/useDocusaurusContext.js

@@ -5,13 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useContext } from 'react';
-import context from './context';
+import { Context } from './docusaurusContext';
 function useDocusaurusContext() {
-    const docusaurusContext = useContext(context);
-    if (docusaurusContext === null) {
-        // should not happen normally
-        throw new Error('Docusaurus context not provided.');
-    }
-    return docusaurusContext;
+    return useContext(Context);
 }
 export default useDocusaurusContext;

package/lib/client/exports/useGlobalData.js

@@ -5,11 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import useDocusaurusContext from './useDocusaurusContext';
-// TODO annoying constant duplication
-// if we import something from outside the /client folder,
-// the tsc directory structure is affected
-// import {DEFAULT_PLUGIN_ID} from '../../constants';
-const DEFAULT_PLUGIN_ID = 'default';
+import { DEFAULT_PLUGIN_ID } from './constants';
 export default function useGlobalData() {
     const { globalData } = useDocusaurusContext();
     if (!globalData) {

package/lib/client/exports/{context.js → useIsBrowser.d.ts}

@@ -4,5 +4,4 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-export default React.createContext(null);
+export default function useIsBrowser(): boolean;

package/lib/{webpack/sharedModuleAliases.d.ts → client/exports/useIsBrowser.js}

@@ -4,7 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare const SharedModuleAliases: {
-    'react-loadable': string;
-};
-export default SharedModuleAliases;
+import { useContext } from 'react';
+import { Context } from './browserContext';
+export default function useIsBrowser() {
+    return useContext(Context);
+}

package/lib/client/flat.d.ts

@@ -4,5 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare function flat(target: unknown): Record<string, any>;
+import type { RouteChunksTree } from '@docusaurus/types';
+declare function flat(target: RouteChunksTree): Record<string, string>;
 export default flat;

package/lib/client/flat.js

@@ -4,22 +4,20 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-// Too dynamic
-/* eslint-disable @typescript-eslint/no-explicit-any */
+const isTree = (x) => typeof x === 'object' && !!x && Object.keys(x).length > 0;
 function flat(target) {
     const delimiter = '.';
     const output = {};
-    function step(object, prev) {
+    function step(object, prefix) {
         Object.keys(object).forEach((key) => {
             const value = object[key];
-            const type = typeof value;
-            const isObject = type === 'object' && !!value;
-            const newKey = prev ? prev + delimiter + key : key;
-            if (isObject && Object.keys(value).length) {
+            const newKey = prefix ? `${prefix}${delimiter}${key}` : key;
+            if (isTree(value)) {
                 step(value, newKey);
-                return;
             }
-            output[newKey] = value;
+            else {
+                output[newKey] = value;
+            }
         });
     }
     step(target);

package/lib/client/normalizeLocation.d.ts

@@ -4,8 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-declare type Location = {
-    pathname: string;
-};
+import type { Location } from '@docusaurus/history';
 declare function normalizeLocation<T extends Location>(location: T): T;
 export default normalizeLocation;

package/lib/client/prefetch.js

@@ -66,7 +66,6 @@ function prefetch(url) {
             resolve();
             preFetched[url] = true;
         })
-            // eslint-disable-next-line @typescript-eslint/no-empty-function
             .catch(() => { }); // 404s are logged to the console anyway.
     });
 }

package/lib/client/serverEntry.js

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// @ts-check
+
 import * as eta from 'eta';
 import React from 'react';
 import {StaticRouter} from 'react-router-dom';
@@ -18,23 +20,21 @@ import path from 'path';
 import fs from 'fs-extra';
 import routes from '@generated/routes';
 import packageJson from '../../package.json';
-// eslint-disable-next-line import/no-unresolved
 import preload from './preload';
-// eslint-disable-next-line import/no-unresolved
 import App from './App';
 import {
   createStatefulLinksCollector,
   ProvideLinksCollector,
 } from './LinksCollector';
-import chalk from 'chalk';
+import logger from '@docusaurus/logger';
 // eslint-disable-next-line no-restricted-imports
 import {memoize} from 'lodash';
 
-const getCompiledSSRTemplate = memoize((template) => {
-  return eta.compile(template.trim(), {
+const getCompiledSSRTemplate = memoize((template) =>
+  eta.compile(template.trim(), {
     rmWhitespace: true,
-  });
-});
+  }),
+);
 
 function renderSSRTemplate(ssrTemplate, data) {
   const compiled = getCompiledSSRTemplate(ssrTemplate);
@@ -45,20 +45,16 @@ export default async function render(locals) {
   try {
     return await doRender(locals);
   } catch (e) {
-    console.error(
-      chalk.red(
-        `Docusaurus Node/SSR could not render static page with path "${locals.path}" because of following error:\n\n${e.stack}\n`,
-      ),
-    );
+    logger.error`Docusaurus Node/SSR could not render static page with path path=${locals.path} because of following error:
+${e.stack}`;
 
-    const isNotDefinedErrorRegex = /(window|document|localStorage|navigator|alert|location|buffer|self) is not defined/i;
+    const isNotDefinedErrorRegex =
+      /(window|document|localStorage|navigator|alert|location|buffer|self) is not defined/i;
 
     if (isNotDefinedErrorRegex.test(e.message)) {
-      console.error(
-        chalk.green(
-          'Pro tip: It looks like you are using code that should run on the client-side only.\nTo get around it, try using <BrowserOnly> (https://docusaurus.io/docs/docusaurus-core/#browseronly) or ExecutionEnvironment (https://docusaurus.io/docs/docusaurus-core/#executionenvironment).\nIt might also require to wrap your client code in useEffect hook and/or import a third-party library dynamically (if any).',
-        ),
-      );
+      logger.info`It looks like you are using code that should run on the client-side only.
+To get around it, try using code=${'<BrowserOnly>'} (path=${'https://docusaurus.io/docs/docusaurus-core/#browseronly'}) or code=${'ExecutionEnvironment'} (path=${'https://docusaurus.io/docs/docusaurus-core/#executionenvironment'}).
+It might also require to wrap your client code in code=${'useEffect'} hook and/or import a third-party library dynamically (if any).`;
     }
 
     throw new Error('Server-side rendering fails due to the error above.');
@@ -131,10 +127,10 @@ async function doRender(locals) {
     version: packageJson.version,
   });
 
-  // Minify html with https://github.com/DanielRuf/html-minifier-terser
-  function doMinify() {
-    return minify(renderedHtml, {
-      removeComments: true,
+  try {
+    // Minify html with https://github.com/DanielRuf/html-minifier-terser
+    return await minify(renderedHtml, {
+      removeComments: false,
       removeRedundantAttributes: true,
       removeEmptyAttributes: true,
       removeScriptTypeAttributes: true,
@@ -142,27 +138,9 @@ async function doRender(locals) {
       useShortDoctype: true,
       minifyJS: true,
     });
-  }
-
-  // TODO this is a temporary error affecting only monorepos due to Terser 5 (async) being used by html-minifier-terser,
-  // instead of the expected Terser 4 (sync)
-  // TODO, remove this once we upgrade everything to Terser 5 (https://github.com/terser/html-minifier-terser/issues/46)
-  // See also
-  // - https://github.com/facebook/docusaurus/issues/3515
-  // - https://github.com/terser/html-minifier-terser/issues/49
-  try {
-    return doMinify();
   } catch (e) {
-    if (
-      e.message &&
-      e.message.includes("Cannot read property 'replace' of undefined")
-    ) {
-      console.error(
-        chalk.red(
-          '\nDocusaurus user: you probably have this known error due to using a monorepo/workspace.\nWe have a workaround for you, please see https://github.com/facebook/docusaurus/issues/3515\n',
-        ),
-      );
-    }
+    logger.error`Minification of page path=${locals.path} failed because of following error:
+${e.stack}`;
     throw e;
   }
 }

package/lib/client/theme-fallback/Error/index.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Layout from '@theme/Layout';
+import ErrorBoundary from '@docusaurus/ErrorBoundary';
+
+function ErrorDisplay({error, tryAgain}) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '50vh',
+        width: '100%',
+        fontSize: '20px',
+      }}>
+      <h1>This page crashed.</h1>
+      <p>{error.message}</p>
+      <button type="button" onClick={tryAgain}>
+        Try again
+      </button>
+    </div>
+  );
+}
+
+function Error({error, tryAgain}) {
+  // We wrap the error in its own error boundary because the layout can actually throw too...
+  // Only the ErrorDisplay component is simple enough to be considered safe to never throw
+  return (
+    <ErrorBoundary
+      // Note: we display the original error here, not the error that we captured in this extra error boundary
+      fallback={() => <ErrorDisplay error={error} tryAgain={tryAgain} />}>
+      <Layout title="Page Error">
+        <ErrorDisplay error={error} tryAgain={tryAgain} />
+      </Layout>
+    </ErrorBoundary>
+  );
+}
+
+export default Error;

package/lib/client/theme-fallback/Layout/index.js

@@ -20,7 +20,7 @@ function Layout(props) {
     <>
       <Head defaultTitle={`${defaultTitle}${tagline ? ` · ${tagline}` : ''}`}>
         {title && <title>{`${title} · ${tagline}`}</title>}
-        {favicon && <link rel="shortcut icon" href={faviconUrl} />}
+        {favicon && <link rel="icon" href={faviconUrl} />}
         {description && <meta name="description" content={description} />}
         {description && (
           <meta property="og:description" content={description} />

package/lib/client/theme-fallback/Loading/index.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 
-export default ({error, retry, pastDelay}) => {
+export default function Loading({error, retry, pastDelay}) {
   if (error) {
     return (
       <div
@@ -133,4 +133,4 @@ export default ({error, retry, pastDelay}) => {
   }
 
   return null;
-};
+}

package/lib/client/theme-fallback/Root/index.js

@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
-
 // Wrapper at the very top of the app, that is applied constantly
 // and does not depend on current route (unlike the layout)
 //
@@ -15,7 +13,7 @@ import React from 'react';
 //
 // See https://github.com/facebook/docusaurus/issues/3919
 function Root({children}) {
-  return <>{children}</>;
+  return children;
 }
 
 export default Root;