Join GitHub today
GitHub is home to over 36 million developers working together to host and review code, manage projects, and build software together.Sign up
Bug when using MDXRenderer + Large Markdown Files + PrismJS #411
The last half a year I tinkered on a new blog written with Gatsby to get rid of my Hugo website generator. Since it is a technical blog, I used PrismJs and MDX. Now I am finally in the process of bringing all my content over, but hit a roadblock when I introduced my first blog post in Gatsby which is very long.
TLDR: Large markdown files with MDX (EDIT: and PrismJS) bring Gatsby to crash.
It all started with the following output on the command line during
It can be seen several times during the process of starting the website.
When I visit the website, I see the this output on the screen.
If I open the developer tools console, I see this output multiple times:
I tried to copy and paste the blog post's content into different starter packs until I narrowed it down to MDX. For instance, it works in gatsby-starter-blog. However, when I tried to use it in my gatsby-MDX-starter-blog, it crashes again; the same way like for my new Gatsby blog.
How to fix it?
Any help is super much appreciated, because I have the feeling that 6 months of work for my new blog with Gatsby went down for nothing, since I struggle with the problem for the last 24 hours. Really appreciate all the things that are possible with MDX now. Hopefully we can find a fix for it.
This was referenced
Jul 2, 2019
What I tried next:
Project still runs! So one would assume it's not related to MDX.
Project shows same Babel output as seen above.
So I thought PrismJS would be the problem. But then I tried my long read blog post in https://github.com/gatsbyjs/gatsby-starter-blog and added PrismJs there again. No Babel output. I even made the blog post 4 times longer and it continued to work.
So the problem must be related to PrismJS which is used within MDX. If MDX is not there, PrismJS performs well.
@ChristopherBiscardi would it be possible to find the culprit within gatsby-mdx (see error output above) or is this related to MDX core? Any help would be super much appreciated!
Forget the last comment... It works in the MDX starter (except for the Babel 500kb output still showing up).
Somehow it only happens because I am using
changed the title
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
Jul 5, 2019
Thank you for the detailed bug report and updates! I'm gonna dive into this a bit today and see what I can dig up.
My initial hunch for the Babel warning is the HTML that
The crashing is much more concerning to me.
We'll find a fix!
Yes. I think PrismJS blows it up in the end. If I output everything that goes through MDXRenderer, I get large pieces of  and it comes out as 802kb string .
If I remove several PrismJS line highlights, it's possible to render it again.
As a quick update I've been able to track down where things go wrong. It's indeed a bug in
So, I'm going to start work on a Babel plugin to address this issue. I should, hopefully, have something together soon!
Yep! There are a few things all coming together to cause this edge case to happen, but now we can fix it for good. Thanks for your patience and understanding.
referenced this issue
Jul 5, 2019
I've got a PR open in Gatsby to fix the error. Though I'm also noticing that the actual code blocks are also missing proper whitespace formatting:
I'm wondering if this also has to do with babel deopting?
Something to also consider @rwieruch is to use
Again, wow! If there is anything I can do for you @johno just let me know. Your effort on this made my day and surely my next week, because I can migrate all the content to my Gatsby blog now
Thanks to @ChristopherBiscardi as well for this neat Gatsby to MDX bridge
Regarding your hint: I will give this example a shot in my code. Haven't seen this approach before! Super valuable. Do I understand correctly that I keep the gatsby-remark-prismjs + MDXRenderer component, but simply define my custom Highlight components for
Will do <3
Radical! If you ever get a chance I'd love to read a post on the good and bad of your migration (when you complete it) so we can improve upon it.
Using this approach you can remove the
It's a bit of a bizarre departure from traditional Markdown-style plugins but is more idiomatic for React and composition as a whole.
Best of luck, and please do reach out if you encounter any other questions/issues.
Git diff of your reproduction repo