Any way to not evaluate components that are not defined?

[leo-petrucci]

I'm using import { evaluate } from '@mdx-js/mdx'; on the client-side to preview MDX changes from an editor. This works great when passing context to it, but because it's client-side it essentially can't handle any import statements.

Is there any way to avoid attempting to evaluate these? I was hoping I'd at least be able to catch the missing component error:

    evaluate(
      mdx,
      {
        ...runtime,
        useMDXComponents: () => components,
      }
    )
      .catch((err) => console.log('errored, not updating', err));

But err is always empty unfortunately.

More context

Given the following MDX:

import MyComponent from 'components/myComponent'

<MyComponent/>

This is being compiled on the fly in an editor on the client (DecapCMS) which allows editing of Markdown and MDX files.
When ran through the evaluate function on the client, it fails because it cannot import the component.

Is there any way to tell the evaluate function to not attempt to compile components that aren't passed to it or part of the context?

[wooorm]

a) provide more info
b) you don’t need context, but if you use context, use an actual context, which we provide in mdx-js/react for react
c) you can pass components: https://mdxjs.com/docs/using-mdx/#mdx-content

[leo-petrucci]

I've left more context. I'm aware of being able to pass components and context, but I'm wondering if I can just "skip" whatever is not defined.

[wooorm]

This is being compiled on the fly in an editor on the client (DecapCMS) which allows editing of Markdown and MDX files.

You can integrate with how things are compiled: you can change <X /> into <Y /> with a plugin.
You can also pass components for all potential components, assuming they are not defined: {X: UndefinedComponent, Y: UndefinedComponent}.

When ran through the evaluate function on the client, it fails because it cannot import the component.

The client side can handle import. The whole reason ESM exists is so that it can all work on the client.

Is there any way to tell the evaluate function to not attempt to compile components that aren't passed to it or part of the context?

MDX does not compile your components.
It doesn’t touch components that you define in your file (with an export or import)
It does allow passing components (through props or context) that are not defined (so no export/import).

But like JavaScript/React/etc: you can’t have undefined variables. Things crash. That’s intentional.

[leo-petrucci]

The client side can handle import. The whole reason ESM exists is so that it can all work on the client.
How does this work if I'm running this on the client on a domain? What should the import be? I know I can import a single .js file from a path, but how does that translate to React components?

After building my app my components are unlikely to follow the same import structure as of my source, so I can't do anything with the relative import path defined in the mdx, unless I'm missing something?

But like JavaScript/React/etc: you can’t have undefined variables. Things crash. That’s intentional.
That's fair, my current issue is that I don't know what's going to be undefined and I can't prepare for it.

Context and passing components is great for stuff that's used very often in multiple MDX files, but imports tend to be one-offs which wouldn't make lots of sense to have in a context or passed as components.

[wooorm]

You can use react in javascript files? Or you can bundle files?
This sounds like you have complex tooling. There are 100s of tools you could be using. I can't advise without knowing what tools you use.
And, it doesn't have much to do with MDX, so perhaps you're better off asking in other places?

[leo-petrucci]

I don't think my tooling is complex at all, I have MDX and I'm trying to display it but having trouble with how to handle imports in production. It doesn't exactly matter where I'm trying to use it.

Obviously MDX doesn't support this, so I'm just going to stick to doing it via Regex, thanks for the help.

[wooorm]

regex

I mentioned that you can create plugins before: https://github.com/orgs/mdx-js/discussions/2343#discussioncomment-6927003.

It doesn't exactly matter where I'm trying to use it.

I think it does. I have some experience helping people on the internet. I’m trying to help you.

Obviously MDX doesn't support this

JavaScript does not let you use undefined variables either. I don‘t understand the question. I don‘t think anyone expects JavaScript to silently ignore undefined variables so why is it expected of MDX?

[ChristianMurphy]

I have MDX and I'm trying to display it but having trouble with how to handle imports in production. It doesn't exactly matter where I'm trying to use it.

MDX is Markdown and JSX, and compiles down to plain JavaScript.
This isn't really an MDX issue.
The issue is that imports are inconsistent between environment.
Either fix the source of the issue (the inconsistent imports).
Or work around it with a plugin, more on that below.

Obviously MDX doesn't support this

MDX can support this, most things can be customized through plugins.
You can learn more about plugins at https://unifiedjs.com/learn/, this would be specifically a recma plugin which works on the JavaScript AST.
With that plugin you could scan for variable in the component scope, and set a default/fallback for each, so it isn't undefined if no prop/context is passed in for the variable.

This feature is not something which makes sense in core, it is niche and unexpected (based of how JS and React work).
But that doesn't mean it cannot be supported, that is why MDX has an extensive plugin API.