Fix #780 When ssr:false don't even try SSR

src/main/resources/lib/enonic/react4xp/React4xp.ts

@@ -29,6 +29,7 @@ import {renderBody} from './React4xp/methods/renderBody';
 import {renderPageContributions} from './React4xp/methods/renderPageContributions';
 import {renderSSRIntoContainer} from './React4xp/methods/renderSSRIntoContainer';
 import {renderTargetContainer} from './React4xp/methods/renderTargetContainer';
+import {renderWarningPlaceholder} from './React4xp/methods/renderWarningPlaceholder';
 import {setHasRegions} from './React4xp/methods/setHasRegions';
 import {setId} from './React4xp/methods/setId';
 import {setIsPage} from './React4xp/methods/setIsPage';
@@ -225,6 +226,7 @@ export class React4xp<
 	public renderPageContributions = renderPageContributions
 	public renderSSRIntoContainer = renderSSRIntoContainer
 	public renderTargetContainer = renderTargetContainer
+	public renderWarningPlaceholder = renderWarningPlaceholder
 	public setHasRegions = setHasRegions
 	public setId = setId
 	public setIsPage = setIsPage

src/main/resources/lib/enonic/react4xp/React4xp/methods/renderBody.ts

@@ -1,5 +1,7 @@
-import type {Request} from '../../../../..';
-import type {React4xp} from '../../React4xp';
+import type { Request } from '../../../../..';
+import type { React4xp } from '../../React4xp';
+import type { AppConfig } from '/types/Application.d';
+import { isSet } from '@enonic/js-utils/value/isSet';
 import shouldSSR from '/lib/enonic/react4xp/React4xp/shouldSSR';
 
 
@@ -13,6 +15,23 @@ export function renderBody(this: React4xp, {
 	request?: Request
 } = {}): string {
 	// log.debug('renderBody ssr:%s jsxPath:%s', ssr, this.jsxPath);
+
+	// Client-side components, may import assets which are not available
+	// server-side. To avoid potential SSR errors just show placeholder:
+	if (
+		(
+			!request
+			|| !request.mode
+			|| request.mode === 'edit'
+		) && (
+			isSet(ssr)
+				? !ssr
+				: (app.config as AppConfig)['react4xp.ssr'] === 'false'
+		)
+	) {
+		return this.renderWarningPlaceholder();
+	}
+
 	return shouldSSR({
 		request,
 		ssr

src/main/resources/lib/enonic/react4xp/React4xp/methods/renderWarningPlaceholder.ts

@@ -0,0 +1,21 @@
+import type { React4xp } from '/types';
+
+
+export function renderWarningPlaceholder(this: React4xp) {
+	const {jsxPath, react4xpId} = this;
+	return `<div class="react4xp-warning">
+	<style>
+		.react4xp-warning {
+			background-color:#ffffb6;
+			border: 1px solid #8b8b00;
+			color: #000;
+			font-family:monospace;
+			font-size:12px;
+			padding:1em;
+		}
+	</style>
+	<p>
+		This React4xp component "<strong>${jsxPath}</strong>" (with id <strong>${react4xpId}</strong>) is configured to be rendered client-side and is thus disabled in Content Studio edit mode.
+	</p>
+</div>`;
+}

src/main/resources/types/React4xp.d.ts

@@ -64,6 +64,7 @@ export interface Instance<
 		body: string
 		content: string
 	}) => string
+	renderWarningPlaceholder: () => string
 	setHasRegions: (hasRegions: boolean) => Instance
 	setId: (react4xpId: Id) => Instance
 	setIsPage: (isPage: boolean) => Instance