fix(v2): render children in BrowserOnly after client is ready (#4935)

* fix(v2): render children in BrowserOnly after client is ready * Fix fallback issue
facebook · Jun 9, 2021 · d81d43c · d81d43c
1 parent 869f4bf
commit d81d43c
Showing 1 changed file with 6 additions and 4 deletions.
diff --git a/packages/docusaurus/src/client/exports/BrowserOnly.tsx b/packages/docusaurus/src/client/exports/BrowserOnly.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import ExecutionEnvironment from './ExecutionEnvironment';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 function BrowserOnly({
   children,
@@ -15,11 +15,13 @@ function BrowserOnly({
   children?: () => JSX.Element;
   fallback?: JSX.Element;
 }): JSX.Element | null {
-  if (!ExecutionEnvironment.canUseDOM || children == null) {
-    return fallback || null;
+  const {isClient} = useDocusaurusContext();
+
+  if (isClient && children != null) {
+    return <>{children()}</>;
   }
 
-  return <>{children()}</>;
+  return fallback || null;
 }
 
 export default BrowserOnly;