[gatsby-plugin-mdx] html field returns empty div for [gatsby-plugin-feed]

[alvinlal]

Description

I am trying to include html in my rss feed for my site using gatsby-plugin-feed. but only an empty div is being returned in my rss.xml file.

You can view the file here

View the repo here

gatsby-plugin-feed configuration:-

   {
      resolve: `gatsby-plugin-feed`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,

        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map(edge => {
                return Object.assign({}, edge.node.frontmatter, {
                  description: edge.node.excerpt,
                  date: edge.node.frontmatter.date,
                  url:
                    site.siteMetadata.siteUrl +
                    "/blog/" +
                    edge.node.frontmatter.slug,
                  guid:
                    site.siteMetadata.siteUrl +
                    "/blog/" +
                    edge.node.frontmatter.slug,
                  custom_elements: [{ "content:encoded": edge.node.html }],
                })
              })
            },
            query: `
            {
              allMdx(sort: {order: DESC, fields: [frontmatter___date]}, filter: {fileAbsolutePath: {regex: "/posts/"}}) {
                edges {
                  node {
                    excerpt
                    body
                    html
                    frontmatter {
                      title
                      date
                      slug
                      featureImage {
                        publicURL
                      }
                    }
                  }
                }
              }
            }
            `,
            output: "/blog/rss.xml",
            title: "RSS Feed",
            match: "^/blog/",
          },
        ],
      },
    },

Steps to reproduce

1. clone the repo here

2. run npm run build

3. then run npm run serve

4. look for the <content:encoded> tag in the generated rss.xml file at /blog/rss.xml. it can be seen as empty

Expected result

<content:encoded> should be populated by the correct html generated from the mdx files.

Actual result

<content:encoded><div></div></content:encoded> is returned,

Environment

System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
Shell: 3.1.0 - /usr/bin/fish
Binaries:
Node: 12.16.0 - /usr/local/bin/node
npm: 6.14.8 - /usr/local/bin/npm
Languages:
Python: 3.8.5 - /usr/bin/python
Browsers:
Chrome: 86.0.4240.75
Firefox: 81.0
npmPackages:
gatsby: ^2.23.3 => 2.23.3
gatsby-image: ^2.4.9 => 2.4.9
gatsby-plugin-canonical-urls: ^2.3.12 => 2.3.12
gatsby-plugin-disqus: ^1.2.2 => 1.2.2
gatsby-plugin-feed: ^2.5.13 => 2.5.13
gatsby-plugin-firebase: ^0.2.0-beta.4 => 0.2.0-beta.4
gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
gatsby-plugin-mailchimp: ^5.2.2 => 5.2.2
gatsby-plugin-mdx: ^1.2.15 => 1.2.15
gatsby-plugin-offline: ^3.2.31 => 3.2.31
gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
gatsby-plugin-robots-txt: ^1.5.3 => 1.5.3
gatsby-plugin-sharp: ^2.6.11 => 2.6.11
gatsby-plugin-sitemap: ^2.4.14 => 2.4.14
gatsby-plugin-styled-components: ^3.3.4 => 3.3.4
gatsby-remark-copy-linked-files: ^2.3.7 => 2.3.7
gatsby-remark-images: ^3.3.10 => 3.3.10
gatsby-source-filesystem: ^2.3.11 => 2.3.11
gatsby-transformer-sharp: ^2.5.5 => 2.5.5
npmGlobalPackages:
gatsby-cli: 2.12.45

[laurieontech]

Thanks for the PR! This is a known issue related to MDX and gatsby-plugin-feed that we're tracking in #25069. I'm going to close this issue but link it there as another reproduction case where we can verify the fix when it's ready.