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

pedrolamas commented 3 years ago

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(R) Core(TM) 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

desktopofsamuel commented 3 years ago

Same issue here. I have upgraded to gatsby@v3.0 but there was a build error related to gatsby-plugin-feed. gatsby develop command was successful and hiding the gatsby-plugin-feed was also successful to build without problem.

Error Message is


 ERROR 

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

 ERROR 

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.

Steps to reproduce

Clone the repo from this branch https://github.com/desktopofsamuel/portfolio/tree/Upgrade-to-Gatsby-v3
Run yarn.
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,
          },
        ],
      },
    },

Run gatsby build again should encounter the build error

Expected result

/rss.xml should be able to build and browse

Actual result

Build Error

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 (88.0.705.81)
  npmPackages:
    gatsby: ^3.0.1 => 3.0.1
    gatsby-image: 3.0.0 => 3.0.0
    gatsby-plugin-catch-links: 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-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-typescript: ^3.0.0 => 3.0.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-plugin-webfonts: ^1.1.2 => 1.1.2
    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-cloudinary: ^0.1.11 => 0.1.11
    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

uniquemo commented 3 years ago

Same issue when I upgrade to gatsby v3~

pieh commented 3 years ago

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

pedrolamas commented 3 years ago

Thanks @pieh, I just confirmed that the issue is fixed and my feeds are working again (tested both gatsby-plugin-feed and gatsby-plugin-feed-generator)

desktopofsamuel commented 3 years ago

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

Clone the repo from this branch https://github.com/desktopofsamuel/portfolio/tree/Upgrade-to-Gatsby-v3
Run yarn. This repo should be able to develop and build

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,
      },
    ],
  },
},

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

gatsbyjs / gatsby