MDX v2 node.type="html"
See original GitHub issueSubject of the issue
Hi! I’m using MDX with gatsby. I’m trying to update my system to MDX v2 but found three different plugins that no longer rendered content. The commonality I saw between all three were that they were creating a node of type html
:
- https://github.com/florianeckerstorfer/gatsby-remark-a11y-emoji/blob/main/src/index.js#L11
- https://github.com/remcohaszing/gatsby-remark-mermaid/blob/master/index.js#L59
- https://github.com/janmarthedal/gatsby-remark-mathjax-ssr/blob/master/index.js#L35
It seems as though something is breaking down on v2 when the node.type is “html”.
Your environment
- OS: macOS Catalina, 10.15.6
- Packages:
- “@mdx-js/mdx”: “^1.6.16” (working) or “^2.0.0-next.8” (broken)
- “@mdx-js/react”: “^1.6.16” (working) or “^2.0.0-next.8” (broken)
- “gatsby-plugin-mdx”: “^1.2.34”
- “gatsby-remark-mathjax-ssr”: “^1.2.1”
- “gatsby-remark-mermaid”: “^2.0.0”
- “gatsby-remark-a11y-emoji”: “^1.1.0”
- Env:
- node: 10.22.1
- yarn: 1.22.10
- gatsby cli: 2.13.0
- gatsby: 2.26.0
- browser: chrome 86.0.4240.80
Steps to reproduce
Vague steps since I’m so far removed:
- In your AST add something that would be either node.type “html” or create a node and set type to “html”
- View the rendering of your mdx–on 1.6.16 you should see that node rendered 🏆 on v2 it should not be rendered 😔
Expected behaviour
I think if you dive into the gatsby plugins, the emoji one should be the simplest (it wraps an emoji with a span that has an appropriate aria label!). So for that expected behviour: I’d expect a line with an emoji to render!
Actual behaviour
Empty <p>
tag.
Source
## Emoji
Emoji get proper a11y automatically! 💯
## Images
...
Output
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
MDX 2
Version 2 of MDX was released after years of hard work, ... Originally, the format was very close to how markdown, and HTML...
Read more >What's new in MDX v2 - LogRocket Blog
In this article, we will explore some of the amazing improvements highlighted in the MDX v2 release notes, including: Improved MDX syntax format ......
Read more >Adding MDX Pages | Gatsby
You can use Markdown syntax to add different HTML elements. Using frontmatter in MDX. By default, gatsby-plugin-mdx supports frontmatter so you can define ......
Read more >Docusaurus: Build optimized websites quickly, focus on your ...
Docusaurus helps you to move fast and write content. ... docs and blog posts with MDX, and Docusaurus builds them into static HTML...
Read more >hast-util-to-estree - unified
This package is a utility that takes a hast (HTML) syntax tree as input and turns it into an estree ... This package...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
for mathjax: you can use
remark-math
as a remark plugin, andrehype-mathjax
as a rehype plugin. No Gatsby-specificness needed.For mermaid, there are also already remark plugins out there: https://github.com/search?q=remark+mermaid.
And I raised an issue for a11y-emoji, plus some other often used gatsby-remark plugins.
For any future readers, I ended up going with https://www.npmjs.com/package/rehype-accessible-emojis for my emojis. https://github.com/florianeckerstorfer/gatsby-remark-a11y-emoji has a similar package without gatsby that is https://github.com/florianeckerstorfer/remark-a11y-emoji but that wasn’t able to work either because it still relied on an html node. Since rehype is dealing with hypertext abstract tree, that’s the right time to introduce a span element that wraps emojis, not at the remark level.