gatsby-plugin-mdx: Display helpful message instead of blowing up in development mode when invalid mdx is present

[PaulBunker]

Summary

When in you save a file with some invalid jsx i.e. an unclosed tag The node is not created in graphql and this means the page/site breaks and it isn't immediately obvious why.

My suggestion is that while in development mode, instead of blowing up. Return the error as the MDX body that way the user doesn't have to wonder why the page isn't working switch to the console, search for an error.

Instead, The webpage that the user is creating displays the appropriate error rather than a graphql error

Motivation

I believe this would make it faster to spot errors and development of pages smoother.

[axe312ger]

I can deeply understand you, the fact that MDX errors do not output enough context is very annoying, especially for my editors in production.

Especially which gatsby page causes the MDX error is not output. At least sometimes the message leads to the actual broken part where the MDX code is faulty.

The root of the issue might be in MDX itself, if this is the case, I'd vote for keeping this one open as meta issue and work with the MDX community to solve this.

My current workaround:

Before I save anything to Contentful (or to disk in your case), you can validate if your MDX is correct via https://mdxjs.com/advanced/api

The error message gives you (most of the time) a human readable snippet of the broken source code with an arrow pointing on the broken tag.

It even comes with line numbers but these are off by X (Because MDX actually wraps your source before passing it to babel)

[PaulBunker]

I believe this check and early return is the cause of the node not being created.

I feel like a check for node_env !== 'production' and adding the e.message to the mdx body should be possible and result in a better user and developer experience

[jonniebigodes]

Despite the scope being a bit off...the same applies, i've ran into that and mentioned in my comment in #21934

[PaulBunker]

The plugin starts it's job, generating nodes and with the help of @mdx/react transpilling the js and markdown and then passes onto Gatsby to continue it's job. (as a side note to whoever is maintaining the plugin, it would be a good thing that the plugin to be more permissive in development mode, meaning that it does not kill the development server if for instance i save a mdx file and i accidently forgot to close a html element or import. The messages in the console help out to some degree but killing the server is a bit to extreme ).

Quote for reference as it's an in depth reply :)

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜