Is there a way to make mdx throw an error when an unknown tag is used

[mixtur]

When there is a typo in some component's name for example

import Picture from '../components/Picture'
<Piicture title={...}>...</Piicture>

The current behaviour is to render <div title={...}>...</div>. I would like to see some kind of error there instead of silent replacement with div.
Is that possible?

(I am using mdx via @next/mdx@10.0.3)

[wooorm]

With that div also comes a warning:

mdx/packages/mdx/mdx-hast-to-jsx.js

Line 137 in 8c922e4

console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")

Are you not seeing a warning? 🤔

[mixtur]

Ow. My bad. Didn't noticed it. I probably have a severe case of the warning blindness)

Yet a huge scary error message in place of a wrong component would be better. IMHO. At least as an option.

[wooorm]

We can’t do that unfortunately: folks can overwrite/define components at runtime. So we don’t know whether a component is defined or not at build time.
Might be something to crash at runtime, but that’s also hmm... A bit much... 😬

[mixtur]

An inline error on runtime is in some sense better than compilation failure even if reporting on compile time was possible. Because of "inline" part. It might show you exactly where the problem had occurred. I think it shouldn't even be accompanied with the React stack trace. Markdown is kinda self evident.

[wooorm]

Markdown is kinda self evident.

This sounds like my terminology is unclear. What I mean with compile time is when markdown is taken to serialized JS. runtime is when that garbled file runs in a browser or so. At compile time we know where the tag is in your markdown document. At runtime, we can only give a react stack trace: there is no “markdown” anymore

[mixtur]

Your terminology is fine. Maybe mine is flawed) What I meant is if you see an error inline on the page it is usually clear where exactly in the markdown file that happened. So maybe there is no need to add a React stack trace which probably will be filled with something like MDXTag which is not very useful (I am in the hypothetical world where that feature is already implemented and I am annoyed by noisy error message in my console)

[wooorm]

I don’t think we should add some overlay on the whole website? The website could be in production!
Without a stack trace, how would you find which component you are missing? (because maybe that component is defined in some files but not in others)