diff --git a/packages/cms/core/src/content-renderer.tsx b/packages/cms/core/src/content-renderer.tsx
index 77225cec5..c9d220aa8 100644
--- a/packages/cms/core/src/content-renderer.tsx
+++ b/packages/cms/core/src/content-renderer.tsx
@@ -1,19 +1,23 @@
-import { CmsType } from './cms.type';
+import type { CmsType } from './cms.type';
+
+const CMS_CLIENT = process.env.CMS_CLIENT as CmsType;
+
+interface ContentRendererProps {
+  content: unknown;
+  type?: CmsType;
+}
 
 export async function ContentRenderer({
   content,
-  type = process.env.CMS_CLIENT as CmsType,
-}: {
-  content: unknown;
-  type?: CmsType;
-}) {
+  type = CMS_CLIENT,
+}: ContentRendererProps) {
   switch (type) {
     case 'keystatic': {
       const { KeystaticDocumentRenderer } = await import(
         '../../keystatic/src/content-renderer'
       );
 
-      return KeystaticDocumentRenderer({ content });
+      return <KeystaticDocumentRenderer content={content} />;
     }
 
     case 'wordpress': {
@@ -21,7 +25,13 @@ export async function ContentRenderer({
         '../../wordpress/src/content-renderer'
       );
 
-      return WordpressContentRenderer({ content });
+      return <WordpressContentRenderer content={content} />;
+    }
+
+    default: {
+      console.error(`Unknown CMS client: ${type as string}`);
+
+      return null;
     }
   }
 }
diff --git a/packages/cms/keystatic/src/content-renderer.tsx b/packages/cms/keystatic/src/content-renderer.tsx
index 40040611c..c3de59220 100644
--- a/packages/cms/keystatic/src/content-renderer.tsx
+++ b/packages/cms/keystatic/src/content-renderer.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Markdoc from '@markdoc/markdoc';
+const Markdoc = await import('@markdoc/markdoc');
 
 export function KeystaticDocumentRenderer({ content }: { content: unknown }) {
   return Markdoc.renderers.react(content as string, React);