fix: isMdx component in prod

Author: gerardnico

contrib/docs/package.json.md

@@ -77,3 +77,8 @@ message: [MODULE_NOT_FOUND] import() failed to load client-project/node_modules/
 * class-variance-authority
 * tailwind-merge
 
+
+## Markdown/Mx
+
+`recma-mdx-is-mdx-component`: So that we can detect that the content comes from Markdown and set the [prose class](../../apps/site/pages/reference/styling.md#prose-content) to true
+https://github.com/remcohaszing/recma-mdx-is-mdx-component

package.json

@@ -65,6 +65,7 @@
     "react": "19.2.6",
     "react-dom": "19.2.6",
     "react-server-dom-webpack": "19.2.6",
+    "recma-mdx-is-mdx-component": "^2.0.0",
     "rehype-autolink-headings": "7.1.0",
     "rehype-parse": "^9.0.1",
     "rehype-react": "8.0.0",

src/interact/markdown/conf/markdownConfig.ts

@@ -94,6 +94,10 @@ export async function createMarkdownConfig() {
     let initMandatoryUnifiedPlugins = getMandatoryUnifiedPlugins(interactConfig)
 
     return {
+        /**
+         * Config for the Rollup Mdx Plugins Options
+         * @param command
+         */
         getMdxRollupConfig: function (command?: InteractCommand): Options {
             return {
                 development: command == "start",
@@ -103,6 +107,7 @@ export async function createMarkdownConfig() {
                 providerImportSource: this.getProviderImportSource(),
                 remarkPlugins: this.getMdxConfig().remarkPlugins,
                 rehypePlugins: this.getMdxConfig().rehypePlugins,
+                recmaPlugins: this.getMdxConfig().recmaPlugins,
             }
         },
         getMdxConfig: function () {
@@ -114,7 +119,11 @@ export async function createMarkdownConfig() {
                 rehypePlugins: [
                     ...(this.getMdConfig().rehypePlugins || {}),
                     ...initMandatoryUnifiedPlugins.mdx.rehypePlugins,
+                ],
+                recmaPlugins:[
+                    ...initMandatoryUnifiedPlugins.mdx.recmaPlugins,
                 ]
+
             }
         },
         getMdConfig: function () {

src/interact/markdown/conf/markdownPluginsMandatory.ts

@@ -8,6 +8,7 @@ import rehypeHrefRewrite from "../plugins/rehype-href-rewrite.js";
 import type {InteractConfig} from "../../config/interactConfig.js";
 import path from "node:path";
 import remarkLocalLinkChecker from "../plugins/remark-local-link-checker.js";
+import recmaPluginInjectisMDXComponent from 'recma-mdx-is-mdx-component'
 
 export type MandatoryUnifiedPlugins = {
     markdown: {
@@ -17,6 +18,7 @@ export type MandatoryUnifiedPlugins = {
     mdx: {
         remarkPlugins: PluggableList,
         rehypePlugins: PluggableList
+        recmaPlugins: PluggableList
     }
 }
 
@@ -60,6 +62,9 @@ export function getMandatoryUnifiedPlugins(interactConfig: InteractConfig): Mand
             remarkPlugins: [
                 remarkMdxFrontmatter, // exports frontmatter as `frontmatter`
             ] satisfies PluggableList,
+            recmaPlugins: [
+                recmaPluginInjectisMDXComponent // inject isMDXComponent const to a mdx module
+            ] satisfies PluggableList
         }
     }
 }

src/resources/middlewares/01-page-modules.tsx

@@ -5,7 +5,12 @@ import getModuleFromPageProvider from 'interact:page-modules';
 import {addProseIfNotDefined} from "@/lib/page-utils";
 
 function isMdxModule(mod: any) {
-    return typeof mod.default === 'function' && mod.default.name === "MDXContent";
+    return typeof mod.default === 'function' &&
+        (
+            mod.default.name === "MDXContent" // works in dev before bundling
+            ||
+            mod.default.isMDXComponent === true // works always, added by the plugin: recma-mdx-is-mdx-component
+        );
 }
 
 /**
@@ -22,7 +27,7 @@ export async function handler(): Promise<MiddlewareHandler> {
             return module;
         }
         if (isMdxModule(module)) {
-            addProseIfNotDefined(module,context);
+            addProseIfNotDefined(module, context);
         }
         return module
 

yarn.lock

@@ -415,6 +415,7 @@ __metadata:
     react: "npm:19.2.6"
     react-dom: "npm:19.2.6"
     react-server-dom-webpack: "npm:19.2.6"
+    recma-mdx-is-mdx-component: "npm:^2.0.0"
     rehype-autolink-headings: "npm:7.1.0"
     rehype-parse: "npm:^9.0.1"
     rehype-react: "npm:8.0.0"
@@ -6909,6 +6910,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"recma-mdx-is-mdx-component@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "recma-mdx-is-mdx-component@npm:2.0.0"
+  dependencies:
+    "@types/estree": "npm:^1.0.0"
+    unified: "npm:^11.0.0"
+    unist-util-mdx-define: "npm:^1.0.0"
+  checksum: 10/60f8256df268cb0e106205d4337b86464fea90ca3fa71b4a91f5636009f4524107fa775f5fdcd6f5ad81b7bbf364e0dc62695ff14c8e78290ab2822e1f1d7d5f
+  languageName: node
+  linkType: hard
+
 "recma-parse@npm:^1.0.0":
   version: 1.0.0
   resolution: "recma-parse@npm:1.0.0"