Next.js is unable to render RichText on server side #41

src/RichText/ErrorBoundary/ErrorBoundaryClient.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import React, {Component, ReactNode} from 'react';
+import {ErrorComponent} from '../ErrorComponent';
+
+interface ErrorBoundaryProps {
+    children: ReactNode
+    Fallback: ({error}: { error: Error }) => React.JSX.Element
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean
+    error: Error
+}
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = {hasError: false, error: new Error()};
+    }
+
+    static getDerivedStateFromError(error) {
+        // Update state so react shows the fallback UI
+        return {hasError: true};
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // Log the error to an error reporting service console
+        this.setState({error});
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <this.props.Fallback error={this.state.error}/>
+        }
+
+        return this.props.children;
+    }
+}
+
+export function ErrorBoundaryClient({children}: { children: React.ReactNode }) {
+    return (
+        <ErrorBoundary Fallback={({error}) => <ErrorComponent>{error.message}</ErrorComponent>}>
+            {children}
+        </ErrorBoundary>
+    );
+}

src/RichText/ErrorBoundary/ErrorBoundaryServer.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+// ErrorBoundaries are not supported on server in Next.js
+export function ErrorBoundaryServer({children}: { children: React.ReactNode }) {
+    return <>{children}</>;
+}

src/RichText/ErrorBoundary/ErrorBoundaryWrapper.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function ErrorBoundaryWrapper({children}: { children: React.ReactNode }) {
+    if (typeof window === 'undefined') {
+        const {ErrorBoundaryServer} = require('./ErrorBoundaryServer');
+        return <ErrorBoundaryServer>{children}</ErrorBoundaryServer>;
+    } else {
+        const {ErrorBoundaryClient} = require('./ErrorBoundaryClient');
+        return <ErrorBoundaryClient>{children}</ErrorBoundaryClient>;
+    }
+}
+

src/RichText/replaceImage.tsx

@@ -5,8 +5,8 @@ import type {ImageComponent, ImageData, ImageComponentParams} from '../types';
 import React from 'react';
 import {IMG_ATTR} from '../constants';
 import {cssToReactStyle} from './cssToReactStyle';
-import {ErrorBoundary} from './ErrorBoundary';
 import {ErrorComponent} from './ErrorComponent';
+import {ErrorBoundaryWrapper} from './ErrorBoundary/ErrorBoundaryWrapper';
 
 
 export function replaceImage<RestProps = Record<string, unknown>>({
@@ -52,7 +52,7 @@ export function replaceImage<RestProps = Record<string, unknown>>({
 
 	const imgProps = {...rest, alt, image, imageStyle, sizes, src, srcSet, style} as ImageComponentParams<RestProps>;
 
-	return <ErrorBoundary Fallback={({error}) => <ErrorComponent>{error.message}</ErrorComponent>}>
+	return <ErrorBoundaryWrapper>
 		<Image {...imgProps} />
-	</ErrorBoundary>;
+	</ErrorBoundaryWrapper>;
 }

src/RichText/replaceLink.tsx

@@ -5,8 +5,8 @@ import type {LinkComponent, ImageComponent, MacroComponent, Replacer, RichTextDa
 import type {createReplacer as CreateReplacer} from './createReplacer';
 import React from 'react';
 import {LINK_ATTR} from '../constants';
-import {ErrorBoundary} from './ErrorBoundary';
 import {ErrorComponent} from './ErrorComponent';
+import {ErrorBoundaryWrapper} from './ErrorBoundary/ErrorBoundaryWrapper';
 
 
 export function replaceLink<RestProps = Record<string, unknown>>({
@@ -76,7 +76,7 @@ export function replaceLink<RestProps = Record<string, unknown>>({
 		})
 	})
 
-	return <ErrorBoundary Fallback={({error}) => <ErrorComponent>{error.message}</ErrorComponent>}>
+	return <ErrorBoundaryWrapper>
 		<Link {...linkProps}>{children}</Link>
-	</ErrorBoundary>;
+	</ErrorBoundaryWrapper>;
 }

src/RichText/replaceMacro.tsx

@@ -4,10 +4,10 @@ import type {MacroComponent, MacroComponentParams, RichTextData, ImageComponent,
 
 import React from 'react';
 import {MACRO_ATTR} from '../constants';
-import {ErrorBoundary} from './ErrorBoundary';
 import {ErrorComponent} from './ErrorComponent';
 import {domToReact, type DOMNode} from 'html-react-parser';
 import {type createReplacer as CreateReplacer} from './createReplacer';
+import {ErrorBoundaryWrapper} from './ErrorBoundary/ErrorBoundaryWrapper';
 
 
 export function replaceMacro<RestProps = Record<string, unknown>>({
@@ -63,7 +63,7 @@ export function replaceMacro<RestProps = Record<string, unknown>>({
         })
     });
 
-    return <ErrorBoundary Fallback={({error}) => <ErrorComponent>{error.message}</ErrorComponent>}>
+    return <ErrorBoundaryWrapper>
         <Macro {...props}>{children}</Macro>
-    </ErrorBoundary>;
+    </ErrorBoundaryWrapper>;
 }