Fixing problem with server side rendering failing

Author: D063520

src/components/Chip/index.js

@@ -1,31 +1,40 @@
 import React, { useEffect, useState } from 'react';
 
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
 export default function Chip ({ label, color }) {
  const [isDarkTheme, setIsDarkTheme] = useState(false);
 
- useEffect(() => {
- setIsDarkTheme(document.documentElement.getAttribute('data-theme') === 'dark');
- }, [document.documentElement.getAttribute('data-theme')]);
+ if (ExecutionEnvironment.canUseDOM) {
+ useEffect(() => {
+ setIsDarkTheme(document.documentElement.getAttribute('data-theme') === 'dark');
+ }, [document.documentElement.getAttribute('data-theme')]);
+ }
 
  const backgroundColor = isDarkTheme
  ? `var(--ifm-color-chip-${color ?? 'blue'}-dark)` // Dark theme background color
  : `var(--ifm-color-chip-${color ?? 'blue'}-light)`; // Light theme background color
 
  return (
- <div
- style={{
- display: 'inline-flex',
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor,
- borderRadius: '16px',
- height: '24px',
- padding: '4px 8px',
- marginX: '2px',
- fontSize: '14px'
- }}
- >
- {label}
- </div>
+ <BrowserOnly>{() =>
+ <div
+ style={{
+ display: 'inline-flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor,
+ borderRadius: '16px',
+ height: '24px',
+ padding: '4px 8px',
+ marginX: '2px',
+ fontSize: '14px'
+ }}
+ >
+ {label}
+ </div>
+ }
+ </BrowserOnly>
  );
 };

src/components/Image/index.js

@@ -2,13 +2,18 @@ import React from 'react'
 
 import s from './index.module.css'
 
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
 export default function Image(props) {
  const { src, alt, style, width = '100%', centered = false} = props
  const imageStyle = { ...style, width }
 
  return (
- <div className={centered ? s.centered : ''}>
- <img src={src} alt={alt} className={s.default} style={imageStyle} />
- </div>
+ <BrowserOnly>{() =>
+ <div className={centered ? s.centered : ''}>
+ <img src={src} alt={alt} className={s.default} style={imageStyle} />
+ </div>
+ }
+ </BrowserOnly>
  )
 }