[gatsby-plugin-mdx] CMS Live Preview

[joe-bell]

Description

Templates that use gatsby-plugin-mdx's MDXRenderer don't render as expected in a CMS "live-preview" environment

In other words, if I make a change to content, I would expect this to re-render the MDX as a live preview.

Additional context

I also raised this with @ChristopherBiscardi via Twitter DM and he suggested the following:

I believe you could pass a string into gen-mdx from gatsby-plugin-mdx and get the mdxrenderer result to pass into your template. This will definitely feel hacky if you do it but we might be able to add more "first class" support if it works out

Steps to reproduce

Currently using gatsby-plugin-mdx in my personal site, with netlify-cms:
https://github.com/joe-bell/joebell.co.uk

The content converts to HTML (and previews the plain HTML, no CSS or MDX transformed markup) just fine using the "markdown" widget.
I investigated this further in a separate branch fix/preview (which is super unstable and prone to changes) and managed to get the template component mapped to the CMS preview but it failed to render the content (which is rendered via MDXRenderer, I've temporarily removed this in the branch to experiment).

Expected result

I think there's two things needed for this to work (but as more of a UI-focussed dev I may need some support to get this "concept" working).

1. Adjustments to MDXRenderer to support run-time environment.

   If I use the MDXRenderer in a template component, it should just render the content as expected. The same MDXProvider could be imported in the CMS config to keep config aligned (e.g. components/scope).

   Perhaps even wrapRootElement could be used instead, keeping all wrapper components (MDXProvider/ThemeProvider/styles in line with the app). (this probably leaks into the scope of gatsby-plugin-netlify-cms

2. An CMS-agnostic "widget" that can be used to render the above

   e.g. in netlify-cms's config.yml, something like: widget: "mdx"

   I have tried netlify-cms-widget-mdx but struggled to get it set-up, personally I'd prefer an approach similar to above that keeps additional configuration to the MDXRenderer to a minimum (perhaps @buz-zard could offer some words of wisdom here).

Actual result

"White screen" / the content fails to render.

Environment

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.16.0 - /var/folders/p_/qfj42m050gl440xt95sz72fm0000gn/T/yarn--1564861457336-0.3337757896022524/node
    Yarn: 1.17.3 - /var/folders/p_/qfj42m050gl440xt95sz72fm0000gn/T/yarn--1564861457336-0.3337757896022524/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 67.0.4
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.32 => 2.13.32 
    gatsby-image: ^2.2.6 => 2.2.6 
    gatsby-plugin-emotion: ^4.1.2 => 4.1.2 
    gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4 
    gatsby-plugin-manifest: ^2.2.3 => 2.2.3 
    gatsby-plugin-mdx: ^1.0.15 => 1.0.15 
    gatsby-plugin-netlify: ^2.1.3 => 2.1.3 
    gatsby-plugin-netlify-cms: ^4.1.6 => 4.1.6 
    gatsby-plugin-offline: ^2.2.4 => 2.2.4 
    gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2 
    gatsby-plugin-sharp: ^2.2.8 => 2.2.8 
    gatsby-remark-images: ^3.1.7 => 3.1.7 
    gatsby-remark-prismjs: ^3.3.3 => 3.3.3 
    gatsby-remark-relative-images: ^0.2.2 => 0.2.2 
    gatsby-source-filesystem: ^2.1.5 => 2.1.5 
    gatsby-transformer-json: ^2.2.2 => 2.2.2 
    gatsby-transformer-sharp: ^2.2.4 => 2.2.4 

[karolis-sh]

I don't think this is related to the Gatsby project. There is an open discussion at Netlify CMS repository though.

The live preview is rather complicated because it's not a live preview - you precompile the component and load it in as the Netlify CMS widget. That's why the MDX widget has rather strict import setup configuration. If you have any issues/questions regards the preview widget I suggest opening an issue the widget repository and I'll see what I can help you with 😉

[joe-bell]

@buz-zard I do agree to an extent, and did consider raising the issue there, but considering how many people are now jumping onto MDX (paticularly through gatsby-plugin-mdx) I think it would be worthwhile enabling some support as I'm not sure if this issue occurs on other CMS providers. Perhaps this leaks into gatsby-plugin-netlify-cms territory but there's probably some overlap

I'd definitely take up your support in the meantime though, thanks!

[karolis-sh]

True, with more discussions a solution could occur. There is also an issue in mdx monorepo on improving the mdx runtime, as from version 1.0.0 the mdx runtime doesn't even work with gatsby-plugin-netlify-cms as netlify cms widget (#10326, karolis-sh/gatsby-mdx#44).

[gatsbot]

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! 💪💜

[joe-bell]

Please keep open 😢

[gatsbot]

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!