app/markdoc/Tag.ts

@@ -1,21 +1,11 @@
-// Workaround about undefined import only in production build
-
 import type { RenderableTreeNode } from "@markdoc/markdoc";
+import type { ReactNode } from "react";
 
-export class Tag<N extends string = string, A extends Record<string, any> = Record<string, any>> {
-  readonly $$mdtype = "Tag" as const;
+import { Tag as MarkdocTag } from "@markdoc/markdoc";
 
-  static isTag = (tag: any): tag is Tag => {
-    return !!(tag?.$$mdtype === "Tag");
-  };
-
-  name: N;
-  attributes: A;
-  children: RenderableTreeNode[];
-
-  constructor(name = "div" as N, attributes = {} as A, children: RenderableTreeNode[] = []) {
-    this.name = name;
-    this.attributes = attributes;
-    this.children = children;
+export class Tag extends MarkdocTag {
+  constructor(name: string | ReactNode, attributes: Record<string, any>, children: RenderableTreeNode[]) {
+    // Workaround for TypeScript's type system
+    super(name as unknown as string, attributes, children);
   }
 }

app/markdoc/nodes.tsx

@@ -1,13 +1,12 @@
 import type { Config, Node } from "@markdoc/markdoc";
 
 import { slugifyWithCounter } from "@sindresorhus/slugify";
+import { nodes as defaultNodes } from "@markdoc/markdoc";
 import { DocsLayout } from "@syntax/DocsLayout";
-import Markdoc from "@markdoc/markdoc";
-import { Fence } from "@syntax/Fence";
-import yaml from "js-yaml";
 import { Link } from "@/components/common/Link";
-
-const { nodes: defaultNodes, Tag } = Markdoc;
+import { Fence } from "@syntax/Fence";
+import { Tag } from "./Tag";
+import yaml from "js-yaml";
 
 let documentSlugifyMap = new Map();
 
@@ -19,7 +18,7 @@ const nodes = {
       documentSlugifyMap.set(config, slugifyWithCounter());
 
       return new Tag(
-        this.render,
+        this.render as unknown as string,
         {
           frontmatter: yaml.load(node.attributes.frontmatter),
           estimatedReadingTime: config?.variables?.estimatedReadingTime,