Fixing error of "x is not defined" and preventing program from crashing.

[RimuruOtter]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

@mdx-js/mdx@^3.1.0

Steps to reproduce

Minimal Version:

import http from 'node:http'
import {evaluate} from '@mdx-js/mdx'
import {renderToPipeableStream} from 'react-dom/server'
import * as runtime from 'react/jsx-runtime'

// Note: refresh the pane on the right to see changes.

http
  .createServer(async function (_, response) {
    const mdx = "\frac{d}"
    const {default: Content} = await evaluate(mdx, runtime)
    const {pipe} = renderToPipeableStream(Content({}))
    pipe(response)
  })
  .listen(8080)

Here is a code snippet from my program:

const render = useCallback(async (data: string) => {
        const processedData = data.replaceAll("<!--", "{/*").replaceAll("-->", "*/}")

        try {
            const evalMarkdown = await compile(processedData, {
                outputFormat: "function-body",
                remarkPlugins: [remarkMath],
                rehypePlugins: [[rehypeKatex, { macros }]]
            })
    
            try {
                const { default: Content } = await run(evalMarkdown, {
                    ...runtime,
                    baseUrl: import.meta.url
                })

                // @ts-ignore
                setMdxContent(<Content />)
            } catch (err) {
                console.error(err)
                return
            }
        } catch (error) {
            console.error(error)
        }
    }, [])

Actual behavior

This throws an error stating: ReferenceError: d is not defined

Problem is that I use KaTeX with this and when it tries to run this. It completely crashes my application and completely removes all the UI, so its not even that I could change the input to stop it.

Expected behavior

The actual behavior that should happen/what I want, is it not to throw an error for this and be able to handle it. And not crash my UI.

Runtime

bun@1.2.0

Package manager

bun@1.2.0

Operating system

Windows 11 Home 24H2

Build and bundle tools

Vite

[ChristianMurphy]

Undefined things are indeed an error.
That is show JSX and JS work as well.
You can slot an empty value in the default with a recma plugin.
See https://mdxjs.com/docs/extending-mdx/#list-of-plugins
And in particular https://github.com/ipikuka/recma-mdx-escape-missing-components

[github-actions]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[ChristianMurphy]

You also appear to want to mix latex into MDX.
This can also be supported with remark math https://github.com/remarkjs/remark-math