gatsby-remark-oembed: Plugin does not work when configured as a gatsby-mdx gatsbyRemarkPlugin

Hi there! I’m trying to use this plugin with Gatsby and MDX, but I can’t seem to make it work. I’ve got it listed in the gatsby-mdx gatsbyRemarkPlugins config, which has worked for other Remark plugins, but can’t seem to find twitter links in my page. I’m not sure if where the problem is, but I don’t see any errors.

Here is my config for gatsby-mdx:

	{
      resolve: `gatsby-mdx`,
      options: {
        defaultLayouts: {
          posts: require.resolve('./src/templates/blog-post.js'),
          default: require.resolve('./src/components/layout.js'),
        },
        extensions: ['.mdx', '.md'],
        gatsbyRemarkPlugins: [
          {
            resolve: '@raae/gatsby-remark-oembed',
            options: {
              providers: {
                settings: {
                  Twitter: {
                    theme: 'dark', // Use the Twitter dark theme
                  },
                },
              },
            },
          },
          {
            resolve: `gatsby-remark-copy-linked-files`,
          },
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-lazy-load`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 768,
            },
          },
          {
            resolve: 'gatsby-remark-prismjs',
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: {
                tsx: 'tsx',
              },
              aliases: {},
            },
          },
        ],
      },
    }

and here is the output from this plugin:

info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 6 | Path: /personal-site-hosting/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 1 | Path: /linked-lists-react/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 10 | Path: /accessibility-rock-star/
info gatsby-remark-oembed: Successfull embeds: 0 | Links with no matching provider: 2 | Path: /npm-card/

The post looks like this:

I recently saw this awesome post from [bnb](https://dev.to/bnb) on Twitter:

https://twitter.com/bitandbang/status/1075473070368919552

The community response has been awesome and I quickly knew I wanted to make my own:

https://twitter.com/callmewuz/status/1075789700898664450

Thanks so much for making this plugin! I hope I can get it working 😄

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 4
  • Comments: 17 (11 by maintainers)

Most upvoted comments

Found another issue, the code in gatsby-ssr and gatsby-browser will not be called when its a sub plugin of gatsby-plugin-mdx. There is a workaround, but I need to tweak the code a little so it’s not to complicated to set up.

@wuz I have spoken to @ChristopherBiscardi on Twitter and he is looking into it.

This seems to be working locally for me now, will investigate further.

Apologies for bumping up an old issue. Has this ever been fixed?

Hi @raae, any news about your plugin and mdx support?

Does not play well with anything I have tried it on basic gatsby starter or my site = does not work.

@donaldboulton take a look at this repo, it is an example site I put together: https://github.com/raae/gatsby-remark-oembed-example-site.