Can't display footnotes in MDX (gatsby-plugin-mdx@^5.x.x) #37955

code-istvan · 2023-04-17T16:05:28Z

code-istvan
Apr 17, 2023

Preliminary Checks

This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Hi my name is Istvan!

I'm trying to display a footnote using gatsby-plugin-mdx@^5.x.x and the gatsby-transformer-remark and gatsby-remark-footnes but since the upgrade of gatsby-plugin-mdx@^5.x.x I'm not able to do it. I don't have a body to fetch and I don't know how to display them.

This is how I'm rendering it in the article template:

<article className="mb-20px blog-posts-body-style">
     {children}
</article>

This is my query:

const query = graphql`
  query PostsBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      id
      excerpt
      fields {
        slug
        timeToRead {
          minutes
        }
      }
      frontmatter {
        author
        title
        date(formatString: "YYYY MMMM DD.", locale: "hu-HU")
        tags
        thumbnail
      }
    }
  }
`

This is my gatsby-config:

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-footnotes`,
            options: {
              footnoteBackRefPreviousElementDisplay: "inline",
              footnoteBackRefDisplay: "inline",
              footnoteBackRefInnerText: "^",
              footnoteListTag: "div",
              footnoteBackRefAnchorStyle: `text-decoration: none;`,
              footnoteBackRefInnerTextStartPosition: "front",
              useFootnoteMarkerText: false,
            },
          },
        ],
      },
    },

Reproduction Link

https://github.com/code-istvan/bw

Steps to Reproduce

Clone the repo
Install dep. NPM
Run gatsby develop
Go to the http://localhost:8000/blog/test/

Expected Result

I would like to display the footnotes.

Actual Result

The footnote rendered as a plain text

Environment

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.49
    Firefox: 111.0.1
    Safari: 16.3
  npmPackages:
    gatsby: ^5.8.1 => 5.8.1 
    gatsby-core-utils: ^4.8.0 => 4.8.0 
    gatsby-plugin-breakpoints: ^1.3.9 => 1.3.9 
    gatsby-plugin-gdpr-cookies: ^2.0.9 => 2.0.9 
    gatsby-plugin-image: ^3.8.0 => 3.8.0 
    gatsby-plugin-loadable-components-ssr: ^4.3.2 => 4.3.2 
    gatsby-plugin-manifest: ^5.8.0 => 5.8.0 
    gatsby-plugin-mdx: ^5.8.0 => 5.8.0 
    gatsby-plugin-netlify: ^5.1.0 => 5.1.0 
    gatsby-plugin-netlify-cms: ^7.8.0 => 7.8.0 
    gatsby-plugin-nprogress: ^5.8.0 => 5.8.0 
    gatsby-plugin-offline: ^6.8.0 => 6.8.0 
    gatsby-plugin-page-creator: ^5.8.0 => 5.8.0 
    gatsby-plugin-robots-txt: ^1.8.0 => 1.8.0 
    gatsby-plugin-sass: ^6.8.0 => 6.8.0 
    gatsby-plugin-sharp: ^5.8.1 => 5.8.1 
    gatsby-plugin-sitemap: ^6.8.0 => 6.8.0 
    gatsby-remark-footnotes: ^0.0.8 => 0.0.8 
    gatsby-remark-images: ^7.8.0 => 7.8.0 
    gatsby-remark-numbered-footnotes: ^1.0.1 => 1.0.1 
    gatsby-remark-relative-images: ^2.0.2 => 2.0.2 
    gatsby-remark-relative-images-v2: ^0.1.5 => 0.1.5 
    gatsby-source-filesystem: ^5.8.0 => 5.8.0 
    gatsby-transformer-json: ^5.8.0 => 5.8.0 
    gatsby-transformer-remark: ^6.8.0 => 6.8.0 
    gatsby-transformer-sharp: ^5.8.0 => 5.8.0 
  npmGlobalPackages:
    gatsby-cli: 5.2.0