Tag <undefined> appears near emojis

[UgRoss]

Hello 👋!

Describe the bug
It looks like emojis are not processed correctly when they are used inside the titles.

To Reproduce
Steps to reproduce the behavior:

1. Create some MDX document
2. Use titles with emojis. For example, ### ⚒️ Tools
3. Check rendered result

Expected behavior
There should not be any <undefined /> tags near the title

Screenshots

Here is what I get when I try to parse some MDX document:

config:

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          //....
          'gatsby-remark-a11y-emoji',
        ]
      }
}

Here is how it looks if I just use remark-a11y-emoji:

Config:

{
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          //....
        ],
        remarkPlugins: [require('@fec/remark-a11y-emoji')],
     }
}

Environment (please complete the following information):

• OS: Mac OS
• Node Version: v14.15.1
• Gatsby Version: ^2.32.8
• gatsby-plugin-mdx: ^1.10.1
• Version: ^1.1.0

Additional context
In case you can't represent it, here is the whole MDX config inside the gatsby-config:

   {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.md`, `.mdx`],
        gatsbyRemarkPlugins: [
          { resolve: `gatsby-remark-relative-images` },
          { resolve: 'gatsby-remark-images', options: { maxWidth: 750 } },
          { resolve: 'gatsby-remark-responsive-iframe' },
          `gatsby-remark-prismjs`,
          'gatsby-remark-copy-linked-files',
          'gatsby-remark-a11y-emoji',
          { resolve: 'gatsby-remark-external-links', options: { target: '_blank' } },
        ]
      },
    }

[florianeckerstorfer]

@UgRoss Thanks for the very detailed bug description. Good news is that @fec/remark-a11y-emoji works correctly and I'm currently planning to deprecate this package and put the gatsby-remark plugin as a thin wrapper into the @fec/remark-a11y-emoji package. I will try to get a version published this weekend and update you here.

[UgRoss]

Got it! Thanks for the explanation! 👍

[florianeckerstorfer]

@UgRoss @fec/remark-a11y-emoji v3.1.0 has been released, which now includes a Gatsby plugin.

[UgRoss]

@florianeckerstorfer thank you!