gatsby-plugin-feed stopped working with gatsby-plugin-mdx in Gatsby v3

Description

My website uses MDX via gatsby-plugin-mdx. I’ve recently started the migration to Gatsby v3, and noticed that when I do a build, the RSS feeds fail with the following error message repeated over and over again:

gatsby-plugin-mdx: Error querying the `html` field.
This field is intended for use with RSS feed generation.
If you're trying to use it in application-level code, try querying for `Mdx.body` instead.
Original error:
Error: renderMdxBody was unavailable when rendering html.


 ERROR

gatsby-plugin-mdx
[object Object],[object Object]

Steps to reproduce

• Clone and checkout this branch: https://github.com/pedrolamas/pedrolamas.com/tree/gatsby
• Run yarn && yarn build and observe the error messages.

That branch is using gatsby-plugin-feed-generator, but the same error occurs with gatsby-plugin-feed. If you want to test with it, do the following after:

• Run yarn remove gatsby-plugin-feed-generator
• Run yarn add gatsby-plugin-feed
• Edit “gatsby-config.js” and change the whole “gatsby-plugin-feed-generator” entry to this:

{
  resolve: `gatsby-plugin-feed`,
  options: require('gatsby-plugin-mdx/feed'),
},

• Run yarn && yarn build and observe the error messages.

Expected result

The feed file should be generated correctly.

Actual result

Errors are shown and the feed items have no content node in it.

Environment

System: OS: Windows 10 10.0.19043 CPU: (12) x64 Intel® Core™ i7-10750H CPU @ 2.60GHz Binaries: Node: 14.15.1 - ~\AppData\Local\Temp\yarn–1614855258976-0.4757388352035463\node.CMD Yarn: 1.22.10 - ~\AppData\Local\Temp\yarn–1614855258976-0.4757388352035463\yarn.CMD npm: 7.5.2 - C:\Program Files\nodejs\npm.CMD Languages: Python: 2.7.15 Browsers: Edge: Spartan (44.19041.423.0), Chromium (88.0.705.81), ChromiumDev (90.0.810.1) npmPackages: gatsby: ^3.0.0 => 3.0.1 gatsby-plugin-env-variables: ^2.0.0 => 2.0.0 gatsby-plugin-eslint: ^3.0.0 => 3.0.0 gatsby-plugin-feed: ^3.0.0 => 3.0.0 gatsby-plugin-google-analytics: ^3.0.0 => 3.0.0 gatsby-plugin-image: ^1.0.0 => 1.0.0 gatsby-plugin-manifest: ^3.0.0 => 3.0.0 gatsby-plugin-mdx: ^2.0.0 => 2.0.0 gatsby-plugin-netlify: ^3.0.0 => 3.0.0 gatsby-plugin-offline: ^4.0.0 => 4.0.0 gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0 gatsby-plugin-robots-txt: ^1.5.5 => 1.5.5 gatsby-plugin-sass: ^4.0.0 => 4.0.0 gatsby-plugin-sharp: ^3.0.0 => 3.0.0 gatsby-plugin-sitemap: ^3.0.0 => 3.0.0 gatsby-plugin-twitter: ^3.0.0 => 3.0.0 gatsby-remark-acronyms: ^1.1.2 => 1.1.2 gatsby-remark-copy-linked-files: ^3.0.0 => 3.0.0 gatsby-remark-images: ^4.0.0 => 4.0.0 gatsby-remark-responsive-iframe: ^3.0.0 => 3.0.0 gatsby-remark-smartypants: ^3.0.0 => 3.0.0 gatsby-source-filesystem: ^3.0.0 => 3.0.0 gatsby-transformer-sharp: ^3.0.0 => 3.0.0 gatsby-transformer-yaml: ^3.0.0 => 3.0.0

[pieh]

Thanks for report and reproduction - just opened PR with fix ( https://github.com/gatsbyjs/gatsby/pull/30158 )

[desktopofsamuel]

In my case, the build is successful now after updating to gatsby@3.1.1 and gatsby-plugin-feed@3.1.0 but HTML is still missing in the RSS feed.

Steps to reproduce

1. Clone the repo from this branch https://github.com/desktopofsamuel/portfolio/tree/Upgrade-to-Gatsby-v3
2. Run yarn. This repo should be able to develop and build
3. Unhide the commented gatsby-plugin-feed at the bottom of the gatsby-config.js

 {
      resolve: "gatsby-plugin-feed",
      options: {
        setup(ref) {
          const ret = ref.query.site.siteMetadata.rssMetadata;
          ret.allMdx = ref.query.allMdx;
          ret.generator = "GatsbyJS Material Starter";
          return ret;
        },
        query: `
        {
          site {
            siteMetadata {
              rssMetadata {
                site_url
                feed_url
                title
                description
                image_url
                author
                copyright
              }
            }
          }
        }
      `,
        feeds: [
          {
            serialize(ctx) {
              const { rssMetadata } = ctx.query.site.siteMetadata;
              return ctx.query.allMdx.edges.map(edge => ({
                categories: edge.node.frontmatter.tags,
                date: edge.node.fields.date,
                title: edge.node.frontmatter.title,
                description: edge.node.excerpt,
                author: rssMetadata.author,
                url: rssMetadata.site_url + edge.node.fields.slug,
                guid: rssMetadata.site_url + edge.node.fields.slug,
                custom_elements: [
                  {
                    "content:encoded": edge.node.html,
                  },
                ],
              }));
            },
            query: `
            {
              allMdx(
                limit: 1000,
                sort: { order: DESC, fields: [fields___date] },
              ) {
                edges {
                  node {
                    excerpt
                    html
                    timeToRead
                    fields {
                      slug
                      date
                    }
                    frontmatter {
                      title
                      cover {
                        publicURL
                      }
                      date
                      category
                      tags
                    }
                  }
                }
              }
            }
          `,
            output: config.siteRss,
          },
        ],
      },
    },

1. Run gatsby build again and encounter the error message as below. Site will be successfully built but after gatsby serve, rss.xml file is still missing the HTML content.

Expected result

/rss.xml should contain HTML code for each blog post content

Actual result

HTML cannot be found in RSS feed after gatsby serve.

<guid isPermaLink="false">
https://desktopofsamuel.com/documentaries-watched-2020-jan-mar-edition/
</guid>
<category>Documentary</category>
<category>Design</category>
<dc:creator>Samuel Wong</dc:creator>
<pubDate>Sat, 04 Apr 2020 16:00:00 GMT</pubDate>
<content:encoded/>

Error message shows up when gatsby build

gatsby-plugin-mdx: Error querying the `html` field.
This field is intended for use with RSS feed generation.
If you're trying to use it in application-level code, try querying for `Mdx.body` instead.
Original error:
Error: renderMdxBody was unavailable when rendering html.

Environment

 System:
    OS: Windows 10 10.0.19041
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 3.8.5
  Browsers:
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.57)
  npmPackages:
    gatsby: ^3.1.1 => 3.1.1
    gatsby-image: 3.0.0 => 3.0.0
    gatsby-plugin-catch-links: 3.0.0 => 3.0.0
    gatsby-plugin-feed: ^3.1.0 => 3.1.0
    gatsby-plugin-google-analytics: 3.0.0 => 3.0.0
    gatsby-plugin-google-gtag: ^3.0.0 => 3.0.0
    gatsby-plugin-image: ^1.0.0 => 1.0.0
    gatsby-plugin-lodash: 4.0.0 => 4.0.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-mdx: ^2.0.0 => 2.0.0
    gatsby-plugin-netlify-cache: ^1.2.0 => 1.2.0
    gatsby-plugin-nprogress: ^3.0.0 => 3.0.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-purgecss: ^5.0.0 => 5.0.0
    gatsby-plugin-react-helmet: 4.0.0 => 4.0.0
    gatsby-plugin-sharp: ^3.0.0 => 3.0.0
    gatsby-plugin-sitemap: ^3.0.0 => 3.0.0
    gatsby-plugin-splitbee: ^0.1.0 => 0.1.0
    gatsby-plugin-styled-components: ^4.0.0 => 4.0.0
    gatsby-plugin-twitter: 3.0.0 => 3.0.0
    gatsby-plugin-webfonts: ^2.0.0 => 2.0.0
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5
    gatsby-remark-autolink-headers: 3.0.0 => 3.0.0
    gatsby-remark-copy-linked-files: 3.0.0 => 3.0.0
    gatsby-remark-external-links: ^0.0.4 => 0.0.4
    gatsby-remark-figure-caption: ^2.0.0 => 2.0.0
    gatsby-remark-grid-tables: ^0.1.0 => 0.1.0
    gatsby-remark-images: 4.0.0 => 4.0.0
    gatsby-remark-images-grid: ^1.0.2 => 1.0.2
    gatsby-remark-images-medium-zoom: ^1.7.0 => 1.7.0
    gatsby-remark-prismjs: 4.0.0 => 4.0.0
    gatsby-remark-responsive-iframe: 3.0.0 => 3.0.0
    gatsby-source-airtable: ^2.1.1 => 2.1.1
    gatsby-source-filesystem: 3.0.0 => 3.0.0
    gatsby-transformer-remark: 3.0.0 => 3.0.0
    gatsby-transformer-sharp: ^3.0.0 => 3.0.0
  npmGlobalPackages:
    gatsby-cli: 2.12.109