MDX v2 breaks Markdown images with gatsby-remark-images
See original GitHub issueDescription
Attempting to upgrade to the latest version of MDX (2.0.0-next.7) breaks gatsby-remark-images
.
Steps to reproduce
Minimal reproduction: https://github.com/patrickarlt/gatsby-mdx-v2-image-issue-reproduction
- Clone Repo
npm install
gatsby develop
- note the missing imagenpm install @mdx-js/mdx@1.6.16 @mdx-js/react@1.6.16
- install previous mdxgatsby clean
gatsby develop
- image appears
Expected result
These pages should render the same in both MDX 2.0.0-next.7 and 1.16.6. This isn’t rendering the image in MDX 2.0.0-next.7
import { Link } from "gatsby";
# Image issues
![Test](../images/gatsby-astronaut.png)
<Link to="/page/">Second Page</Link>
Actual result
Image does not render.
Environment
Run gatsby info --clipboard
in your project directory and paste the output here.
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: 1.22.4 - ~/.nvm/versions/node/v12.16.3/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Languages:
Python: 2.7.10 - /usr/bin/python
Browsers:
Chrome: 84.0.4147.135
Firefox: 81.0
Safari: 13.1.2
npmPackages:
gatsby: ^2.24.12 => 2.24.12
gatsby-image: ^2.4.16 => 2.4.16
gatsby-plugin-manifest: ^2.2.4 => 2.2.4
gatsby-plugin-mdx: ^1.0.0 => 1.0.22
gatsby-plugin-offline: ^2.2.4 => 2.2.4
gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
gatsby-plugin-sharp: ^2.6.29 => 2.6.29
gatsby-remark-images: ^3.3.27 => 3.3.27
gatsby-source-filesystem: ^2.3.25 => 2.3.25
gatsby-transformer-sharp: ^2.5.13 => 2.5.13
npmGlobalPackages:
gatsby-cli: 2.12.29
Issue Analytics
- State:
- Created 3 years ago
- Comments:11 (2 by maintainers)
Top Results From Across the Web
MDX v2 breaks Markdown images with gatsby-remark-images
Attempting to upgrade to the latest version of MDX (2.0.0-next.7) breaks gatsby-remark-images . Your environment. Using 2.0.0-next.
Read more >Working with Images in Markdown & MDX - Gatsby
When building Gatsby sites composed primarily of markdown or MDX , insertion of images can enhance the content. ... Inline images with gatsby-remark-images....
Read more >Trouble rendering images in markdown with gatsbyjs
From gatsby-remark-images plugin documentation: You can reference an image in markdown using the relative path, where that path is relative ...
Read more >Learn Optimizing Images in MDX – Introduction to Gatsby, v2
Jason demonstrates how to optimize images in MDX automatically for standard Markdown-style images with gatsby-remark-images plugin, which helps avoid ...
Read more >How to Build Blog Using Gatsby | by Suprabha Supi | Medium
MDX is way to enable React component inside of mark down. ... the image inline or in blog, you need to install one...
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
Any update on the matter ?
@yougotashovel Yes and no. We ended up creating our own custom plugin to polyfill the behavior. If you’re curious, you can check it out here: https://github.com/newrelic/docs-website/blob/develop/plugins/gatsby-remark-mdx-v2-images/index.js
Config is here: https://github.com/newrelic/docs-website/blob/fb9ab7e4c73191d6c4587d08453ddeefa631858f/gatsby-config.js#L294-L296