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

pedrolamas · 2021-03-04T10:54:42Z

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

The text was updated successfully, but these errors were encountered:

desktopofsamuel · 2021-03-05T07:02:04Z

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 · 2021-03-05T08:51:39Z

Same issue when I upgrade to gatsby v3~

pieh · 2021-03-10T12:03:46Z

Thanks for report and reproduction - just opened PR with fix ( #30158 )

pedrolamas · 2021-03-12T11:47:03Z

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 · 2021-03-22T17:37:02Z

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

pedrolamas added the type: bug An issue or pull request relating to a bug in Gatsby label Mar 4, 2021

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Mar 4, 2021

pieh added topic: MDX labels Mar 4, 2021

LekoArts added v3migration and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Mar 8, 2021

pieh self-assigned this Mar 10, 2021

pieh mentioned this issue Mar 10, 2021

fix(gatsby-plugin-mdx): fix html field resolver to work with webpack@5 #30158

Merged

pieh closed this as completed in #30158 Mar 10, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

pedrolamas commented Mar 4, 2021 •

edited

Loading

desktopofsamuel commented Mar 5, 2021 •

edited

Loading

uniquemo commented Mar 5, 2021

pieh commented Mar 10, 2021

pedrolamas commented Mar 12, 2021

desktopofsamuel commented Mar 22, 2021 •

edited

Loading

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

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

Comments

pedrolamas commented Mar 4, 2021 • edited Loading

Description

Steps to reproduce

Expected result

Actual result

Environment

desktopofsamuel commented Mar 5, 2021 • edited Loading

Steps to reproduce

Expected result

Actual result

Environment

uniquemo commented Mar 5, 2021

pieh commented Mar 10, 2021

pedrolamas commented Mar 12, 2021

desktopofsamuel commented Mar 22, 2021 • edited Loading

Steps to reproduce

Expected result

Actual result

Environment

pedrolamas commented Mar 4, 2021 •

edited

Loading

desktopofsamuel commented Mar 5, 2021 •

edited

Loading

desktopofsamuel commented Mar 22, 2021 •

edited

Loading