gatsby-remark-responsive-iframe not working after updating mdx to latest build.

[GerardKetuma]

gatsby-remark-responsive-iframe not working due to mdx.

After updating mdx and it's related packages (mdx - ^1.0.0, tag - ^0.20.3, react - ^1.0.6) and also updating gatsby - ^2.3.37 to the lastest build, iframes in mdx files are no longer being transformed to be responsive.

Environment

• MacOS Mojave
• mdx - ^1.0.0, tag - ^0.20.3, react - ^1.0.6, gatsby - ^2.3.37
• npm - 6.9.0, node 10.

Steps to reproduce

I have created a minimal repo which is a clone of the gatsby-starter-blog here:
https://github.com/GerardKetuma/gatsby-mdx-blog

Run it (npm start) and go to this path: /hi-folks/

I added a sample youtube iframe embed in that page and you will see that it does nothing even though gatsby-remark-responsive-iframe is configured.

Expected behaviour

The iframe is supposed to be responsive within the aspect ratio defined by the width and height.

Actual behaviour

The iframe is displayed as is.

@ChristopherBiscardi had mentioned to update the packages as there was a fix to the repo, which I did (#429 (comment))

[ChristopherBiscardi]

Note that @mdx-js/tag is no longer required if you're using mdx-js/mdx and mdx-js/react 1.0 and gatsby-mdx 0.6.x. you should remove that package from your site.

[GerardKetuma]

@ChristopherBiscardi Removed mdx-js/tag from the minimal repo to reproduce the issue.

[johno]

Thanks for the report @GerardKetuma! I've opened up a PR in the Gatsby repo to update gatsby-remark-responsive-iframe to better support MDX's slightly different AST. You can follow along there to see when the fix is published.