Unrecognised components

(Not sure if this should live here or on xdm?)

• mdx-bundler version: ^4.1.1
• node version: v16.1.0
• npm version: 7.11.2

On NextJS, pages/index.js

import React from 'react';
import path from 'path';
import { bundleMDX } from 'mdx-bundler';
import { getMDXComponent } from 'mdx-bundler/client';

process.env.ESBUILD_BINARY_PATH = path.join(
  process.cwd(),
  'node_modules',
  'esbuild',
  'bin',
  'esbuild'
);

export default function Home({ code }) {
  const Component = React.useMemo(() => getMDXComponent(code), [code]);

  return (
    <div>
      <Component />
    </div>
  );
}

export async function getStaticProps() {
  const result = await bundleMDX(`
    ---
    title: Foo!
    ---

    Foo Component
    
    <Foo />
  `);

  return {
    props: {
      code: result.code
    }
  };
}

What you did:

My remote MDX content contained a component which I did not expect (old component no longer in use, but still in the old MDX file). When using mdx-bundler with NextJS, this throws errors and the page is unable to compile/render.

I was previously using next-mdx-remote, using the v2 branch (so mdx v2 under the hood), and components which were not recognised were simply removed.

What happened:

With a single unrecognised component, I’m getting a lot of these logs:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at y (eval at getMDXComponent (/.../node_modules/mdx-bundler/dist/client.js:37:50), <anonymous>:3:1022)

Reproduction repository:

https://stackblitz.com/edit/nextjs-cmdd2t?file=pages/index.js

Problem description:

Add an unrecognised component, and an error will be thrown:

---
title: Foo
---

Foo Component...!

<Foo />

Suggested solution:

Either remove the Foo component from the tree or allow a way to hook onto unrecognised components and display something?

[Arcath]

I think mdx-bundler is working as intended here. If I used a component that I hadn’t imported I’d want an error to be thrown so I could fix it, I wouldn’t want my site to build as normal and just skip it out.

If you want to implement this functionality I’d suggest looking at a remark/rehype plugin for xdm.

[k1sul1]

I would argue that MDX is not (always) literate programming. I’m currently working on a case where SWIM updates a site periodically. They don’t know how to code, but they can read instructions like “You can also use <Stuff />, <Stuff2 /> in the markup”.

They are not comfortable with the idea of writing (J/T)SX, but markdown they can handle. They can also handle some sprinkled in components.

It’d be nice if there was an option to provide a fallback component, just so I could have the live preview show where exactly the non-computer savvy user made the mistake. Right now it seems I’m forced to resort to… this.

I don’t know how any of this actually works, but it’d be nice to have support for this use case. It’s not necessary, but it’d be nice.