Gatsby: [gatsby-plugin-mdx] renderMdxBody was unavailable when rendering html

[AAverin]

Description

Building some pages with mdx, I get following error:

ReferenceError: window is not defined
    at evalmachine.<anonymous>:5:41
    at evalmachine.<anonymous>:794:10
    at Script.runInContext (vm.js:134:20)
    at Script.runInNewContext (vm.js:140:17)
    at module.exports (/.../gSite/node_modules/eval/eval.js:73:12)
    at afterEmit (/.../gSite/node_modules/gatsby-plugin-mdx/utils/render-html.js:81:22)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/.../gSite/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:20:1)
    at AsyncSeriesHook.lazyCompileHook (/.../gSite/node_modules/tapable/lib/Hook.js:154:20)
    at /.../gSite/node_modules/webpack/lib/Compiler.js:358:27
    at /.../gSite/node_modules/neo-async/async.js:2830:7


 ERROR 

gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.
>> This is a bug.

Steps to reproduce

Didn't try on the clean project yet.
Just added mdx plugin and few mdx files, then tried to query in the test GraphiQL UI

allMdx(filter: {fileAbsolutePath: {regex: "//_docs/(.*/)?en/"}}) {
    edges {
      node {
        fileAbsolutePath
        html
      }
    }
  }

Expected result

HTML contents of MDX pages should be available

Actual result

Error renderMdxBody was unavailable when rendering html.

Environment

System:
OS: macOS 10.14.5
CPU: x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.1.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.100
Safari: 12.1.1
npmPackages:
gatsby: ^2.13.39 => 2.13.39
gatsby-image: ^2.2.6 => 2.2.6
gatsby-plugin-alias-imports: ^1.0.5 => 1.0.5
gatsby-plugin-catch-links: ^2.1.2 => 2.1.2
gatsby-plugin-facebook-pixel: ^1.0.3 => 1.0.3
gatsby-plugin-google-analytics: ^2.1.4 => 2.1.4
gatsby-plugin-google-gtag: ^1.1.4 => 1.1.4
gatsby-plugin-mdx: ^1.0.24 => 1.0.24
gatsby-plugin-react-helmet: ^3.1.2 => 3.1.2
gatsby-plugin-sharp: ^2.2.9 => 2.2.9
gatsby-plugin-sitemap: ^2.2.3 => 2.2.3
gatsby-remark-autolink-headers: ^2.1.3 => 2.1.3
gatsby-remark-copy-linked-files: ^2.1.3 => 2.1.3
gatsby-remark-images: ^3.1.7 => 3.1.7
gatsby-source-filesystem: ^2.1.6 => 2.1.6
gatsby-transformer-remark: ^2.6.9 => 2.6.9
gatsby-transformer-sharp: ^2.2.4 => 2.2.4
npmGlobalPackages:
gatsby-cli: 2.4.4

[AAverin]

Codesandbox with issue being reproduced:
https://codesandbox.io/s/gatsby-starter-default-jhr25

[S-unya]

@AAverin I may be missing something, but I don't see any issues in that code sandbox (apart from deprecation warnings for componentWillMount). What should I be seeing?

I have tried in Firefox and Chrome.

[AAverin]

@S-unya steps to reproduced described above
Open ___graphql in the browser, in codesandbox it would be https://jhr25.sse.codesandbox.io/___graphql
And run

query MyQuery {
  allMdx {
    edges {
      node {
        html
      }
    }
  }
}

[AAverin]

Here is what I get

{
  "errors": [
    {
      "message": "String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
      "locations": [
        {
          "line": 5,
          "column": 9
        }
      ],
      "path": [
        "allMdx",
        "edges",
        0,
        "node",
        "html"
      ],
      "stack": [
        "TypeError: String cannot represent value: { context: { sourceMessage: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\" }, text: \"gatsby-plugin-mdx: renderMdxBody was unavailable when rendering html.\\n>> This is a bug.\", level: \"ERROR\", stack: [], docsUrl: \"https://gatsby.dev/issue-how-to\" }",
        "    at GraphQLScalarType.serializeString [as serialize] (/sandbox/node_modules/graphql/type/scalars.js:159:9)",
        "    at completeLeafValue (/sandbox/node_modules/graphql/execution/execute.js:669:37)",
        "    at completeValue (/sandbox/node_modules/graphql/execution/execute.js:615:12)",
        "    at /sandbox/node_modules/graphql/execution/execute.js:528:16",
        "    at process._tickCallback (internal/process/next_tick.js:68:7)"
      ]
    }
  ],
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "html": null
          }
        }
      ]
    }
  }
}

[LekoArts]

You need to use body instead of html as afaik the latter is only there for usage in gatsby-plugin-feed.

The guide is also telling the reader to use body :)
https://www.gatsbyjs.org/docs/mdx/programmatically-creating-pages/#make-a-template-for-your-posts

[AAverin]

@LekoArts Hmm, thanks for the note, I'll need to play with it.

Although looking into body response, it will probably not work for my case.

I have documentation for my product that is now a manually built page.
I was planning to move all documentation sections and sub-sections into blog-like folder structure with mdx inside, query all of them on my page, build menu with navigation and inline the content.

[wardpeet]

@AAverin that's still possible, I would suggest looking at the url @LekoArts posted and maybe https://www.gatsbyjs.org/docs/mdx/programmatically-creating-pages/#create-pages-from-sourced-mdx-files

[AAverin]

@wardpeet
I already have blog with generated pages.
What I am building now is a little different – I need to compose a single page out of many mdx files that lie somewhere in the filesystem.

[johno]

You can use MDXRenderer to achieve this with a pageQuery that returns multiple documents by modifying your existing query:

allMdx(filter: {fileAbsolutePath: {regex: "//_docs/(.*/)?en/"}}) {
    edges {
      node {
        fileAbsolutePath
-        html
+       body
      }
    }
  }

And then render each document similarly to the following:

import React from 'react'
import MDXRenderer from 'gatsby-plugin-mdx/renderer'

export default ({ data }) => (
  <>
    {data.allMdx.edges.map(({ node }) => (
      <div key={node.fileAbsolutePath}>
        <h3>{node.fileAbsolutePath}</h3>
        <MDXRenderer>{node.body}</MDXRenderer>
      </div>
    ))}
  </>
)

All together:

import React from 'react'
import { graphql } from 'gatsby'
import MDXRenderer from 'gatsby-plugin-mdx/renderer'

export default ({ data }) => (
  <>
    {data.allMdx.edges.map(({ node }) => (
      <div key={node.fileAbsolutePath}>
        <h3>{node.fileAbsolutePath}</h3>
        <MDXRenderer>{node.body}</MDXRenderer>
      </div>
    ))}
  </>
)

export const pageQuery = graphql`
  {
    allMdx(filter: {fileAbsolutePath: {regex: "//_docs/(.*/)?en/"}}) {
      edges {
        node {
          fileAbsolutePath
          body
        }
      }
    }
  }
`

As @LekoArts mentioned, you won't typically need to reference the html node directly because it's mostly intended for RSS feeds. And when you do reference it, all components you use need to be able to be SSR-friendly since they'll be renderer in node.

[wardpeet]

Thank you for opening this, @AAverin

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜

[vcarl]

I'm also running into this, while adding search to pages built from MDX files. My first thought was to grab the HTML to index against, but I'll likely end up walking the AST and pulling content out of that instead.

[taylorham]

Same as @vcarl here.

I'm using a bunch of custom components which obfuscate content from the excerpt query, and I would like to be able to build my search index from the innerText of the resulting HTML rather than the 2 words that are on each page outside of my custom components. 😛

The query doesn't work when attempting to build or when running develop. Is there any way to actually get at these values?