Typescript React Component dynamically compiled works in Dev but not production

[ccrowe-trimble]

I have a simple typescript page that loads a dynamic MDX string and compiles it and then renders it. This is working and rendering fine on my development machine.

But when this is built for production I then get an error failed to fetch dynamically imported module.

My code is this

const mdxString = `
import Warning from '../Components/Warning';

# Hello World

This is an example MDX file.

<Warning visible={true}>Hello World</Warning>`;

The warning component works and renders correctly in dev but in production it tried to download https://website.com/Components/Warning

The compiled code is below and from this I can see why it is trying to download the file. But how do I make it refer to the internal component ?

async function RunMdxComponent(theCompiledMdx: string) {
        const { default: MDXContent } = await run(
            theCompiledMdx,
            { ...runtime as any, baseUrl: import.meta.url }
        );
        return <MDXContent />;
    }

code

"use strict";
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const _importMetaUrl = arguments[0].baseUrl;
if (!_importMetaUrl) throw new Error("Unexpected missing `options.baseUrl` needed to support `export … from`, `import`, or `import.meta.url` when generating `function-body`");
const {default: Warning} = await import(_resolveDynamicMdxSpecifier('../Components/Warning'));
function _createMdxContent(props) {
  const _components = {
    h1: "h1",
    p: "p",
    ...props.components
  };
  return _jsxs(_Fragment, {
    children: [_jsx(_components.h1, {
      children: "Hello World"
    }), "\n", _jsx(_components.p, {
      children: "This is an example MDX file."
    }), "\n", _jsx(Warning, {
      visible: true,
      children: "Hello World"
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, {
    ...props,
    children: _jsx(_createMdxContent, {
      ...props
    })
  }) : _createMdxContent(props);
}
return {
  default: MDXContent
};
function _resolveDynamicMdxSpecifier(d) {
  if (typeof d !== "string") return d;
  try {
    new URL(d);
    return d;
  } catch {}
  if (d.startsWith("/") || d.startsWith("./") || d.startsWith("../")) return new URL(d, _importMetaUrl).href;
  return d;
}

How do I refer to a component definded in the same application?

I am using typescript and react and vite

[ChristianMurphy]

Welcome @ccrowe-trimble! 👋
This isn't an MDX error, so much as a build tool/js error.
The issue is that this line

await import(_resolveDynamicMdxSpecifier('../Components/Warning'));

is a JS dynamic import https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
It will look for a file relative to your current web page.

The build tool you are using has not put a file there, so it can't be resolved.

[ccrowe-trimble]

It will depend a lot on your build tools. Vite for example, can resolve dynamic imports if they are both relative and have an extension https://github.com/vite-plugin/vite-plugin-dynamic-import

I have tried to understand this but I really do not know how to proceed.

Is there any code sample of using MDX with React and Typescript and Vite showing how to configure the bundler for me to actually use a component in a production build?

import { useEffect, useState } from 'react';
import { ReactNode } from 'react';
import { run } from '@mdx-js/mdx'
import * as runtime from 'react/jsx-runtime'
import { compile } from '@mdx-js/mdx'


function PageMDXSample() {
    const [mdxAsJavascript, setMdxAsJavascript] = useState<string>("");
    const [MdxComponent, setMdxComponent] = useState<ReactNode | null>(null);

    async function compileMdx(mdxString: string) {

        try {
            const compiledMdx = await compile(mdxString, {
                outputFormat: 'function-body',
                /* …otherOptions */
            });
            return String(compiledMdx);
        } catch (error) {
            console.error('Error compiling MDX:', error);
            return null;
        }
    };

    async function RunMdxComponent(theCompiledMdx: string) {
        const { default: MDXContent } = await run(
            theCompiledMdx,
            { ...runtime as any, baseUrl: import.meta.url }
        );
        return <MDXContent />;
    }

    useEffect(() => {
        const mdxString = `
import Component from '../component';
 
# Hello World
This **is** an example MDX file.
<Component />
 `;

        compileMdx(mdxString).then(async (theJavascript) => {

            if (theJavascript != null) {
                console.log(theJavascript);
                setMdxAsJavascript(theJavascript)
            }

        });
    }, []);

    useEffect(() => {
        if (mdxAsJavascript != "") {
            RunMdxComponent(mdxAsJavascript).then((theComponent) => {
                setMdxComponent(theComponent);
            })
        }

    }, [mdxAsJavascript]);

    return (
        <>
            <div>
                {MdxComponent}
            </div>
        </>
    );


}

export default PageMDXSample;

and my component is

export default function Component() {
    return <div>Component</div>
}

[remcohaszing]

MDX is a programming language that is compiled to JavaScript. You’re compiling and evaluating MDX on the client side, which comes with its own complexity and security issues.

Let’s take a step back.

Does your app actually need that? Why aren’t you using @mdx-js/rollup?

[ccrowe-trimble]

MDX is a programming language that is compiled to JavaScript. You’re compiling and evaluating MDX on the client side, which comes with its own complexity and security issues.

Let’s take a step back.

Does your app actually need that? Why aren’t you using @mdx-js/rollup?

I am wanting to create a WIKI page and populate the WIKI page dynamically with MDX from elsewhere (like a database).

I am wanting the MDX to refer to a React component that is in my application directly or via a NPM module.

This works fine in Development, but when I try to reference the componnent in production it fails as it tries to dynamically load it from the original source location which does not exist in production.

I am using react not nextJS. I am using typescript and vite. And I need to load the MDX dynamically. It can not be included in the project as .MDX files.

Static MDX files refering to a component work in my production builds but I want to be able to load the content from a database. So my main issue is how do I reference the component dynamically.

I can see from the dynamically compiled MDX that it tried to directly load the component from the original import path. But that file will never exist in my production built code at that url. Also If nothing refers to the component in the application then I believe it is not included in the JS bundle either.

[remcohaszing]

So you want to customize how imports are resolved. Instead of using MDX’s outputFormat: 'function-body' and run function, you could use estree-util-module-to-function. That allows you to fully customize how imports are resolved.

But possibly even better would be to use the components prop instead of imports.

[wooorm]

The error you get also points to a solution: pass a url. As you point out you have MDX in a database. You have to specify where the components are in relation to that database.

Or pass them indeed, as Remco mentions

[ccrowe-trimble]

I have created a simple example showing the following

1. Simple .MDX file which works in development (npm run dev) and production (npm run build, and npm run preview)
2. Simple dynamic MDX string that works with (npm run dev)
3. Simple dynamic MDX string that does not work with (npm run build, and npm run preview)

https://github.com/ccrowe-trimble/mdx

I hope this is useful to help me get it to work as I do not know how to make this work in production with dynamic a MDX string.

[ccrowe-trimble]

I have come to the realisation that this is probably not going to work how I wanted it to.

Even my simple component still requires React/jsx-runtime to compile and obviosuly my idea was not to have a simple react component but something that probably has lot of dependancies.

import { jsx as _jsx } from "react/jsx-runtime";
function CustomComponent() {
    return _jsx("div", { children: "This is from a Custom Component called [Custom Component]" });
}
export default CustomComponent;

Chris