How to suppress "Expected component to be defined"?

[hahnbeelee]

My goal is to convert an MDX string to a React string. By following this thread, I have created this function

import { evaluateSync } from '@mdx-js/mdx';
import { createElement } from 'react';
import { renderToString } from 'react-dom/server';
import * as runtime from 'react/jsx-runtime';

import { coreRemarkMdPlugins } from './remark.js';

export function mdxToReact(body: string) {
  const mdx = evaluateSync(body, {
    Fragment: undefined,
    jsx: undefined,
    jsxs: undefined,
    ...(runtime as any),
    remarkPlugins: coreRemarkMdPlugins,
  }).default;

  return renderToString(createElement(mdx));
}

Unfortunately when I put in a string like "<RandomComponent>child</RandomComponent>" it throws an error Error: Expected component RandomComponent to be defined: you likely forgot to import, pass, or provide it..

All I want is to go from an mdx string to a react string. Is there anyway I can suppress this error? I read the options here but I wasn't able to draw any conclusions.

Thank you!

[wooorm]

body is already a string.
Why do you evaluate?
what do you mean “react string”? <RandomComponent>child</RandomComponent> is a react string?

[hahnbeelee]

Why do you want people to write like that?
Why not tell people to write the second?

Because of the beauty of mdx - it's a better user experience to use markdown over html tags. Telling our users to switch between using markdown and html syntax seems like a subpar user experience.

Or tell them to put it in a different file?
You can import MDX files in other MDX files.

I'm running a multi-tenant next.js application that is dependent on getStaticProps/next-mdx-remote. So I don't have access to a bundler or file system at the moment. So my goal right now is basically to recreate exports/imports from mdx files to other mdx files

[hahnbeelee]

It's why I asked this and what I'm trying to achieve in this thread is this step of the import:

Though the component will have translated # into an <h1> by this point.

[hahnbeelee]

Maybe a more concise way of asking my initial question is - is there a way to change all my markdown to html inside my mdx files without impacting (removing or throwing on) my jsx components?

[ChristianMurphy]

is there a way to change all my markdown to html inside my mdx files without impacting (removing or throwing on) my jsx components?

Short answer is: no.
That is not what MDX is designed to do.

You could get close-ish, by adding a rehype plugin to snapshot the hast content. https://mdxjs.com/packages/mdx/
At this stage markdown has been translated to HTML, but custom elements have not been rendered yet (example https://mdxjs.com/playground/)

---

Though taking a step back, this is very much feel like an XY Problem.
Why test an output which no user will ever see? What property of your rendering pipeline are you trying to test here?

[wooorm]

So I don't have access to a bundler or file system at the moment.

It might be better to solve this problem 👆

Telling our users to switch between using markdown and html syntax seems like a subpar user experience.

Important note: that isn’t HTML. It’s JSX. It’s a different language.

Is there a way to change all my markdown to html inside my mdx files without impacting (removing or throwing on) my jsx components?

What is markdown?

export const a = {'is *this* markdown?': '*this*?'}

export const b = 'is *this* markdown?'

export const c = is *this* markdown?

export const d = <>is *this* markdown?</>

export const e = <>{'this?'}</>

{'*this*?'}

{'# this?'}

I would strongly recommend not inventing a new language, that doesn’t work in other places.
I do recommend solving the file system.

If you must do this, I recommend a tagged template:

export function SomeComponent() {
  return mdx`# hi`
}

Something along the lines of a plugin looking for TaggedTemplateExpressions with the tag mdx then use unified().use(remarkParse).use(remarkMdx) to get the tree and stitch the ASTs together.