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

[wuz]

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 😄

[raae]

Yes, it seems the plugin does not play nicely with gatsby-mdx as you experienced.

I have not had time to look into it properly. There was some convo with the gatsby-mdxteam on Twitter.

I think it might be an issue with gatsby-mdx not handling sub plugin cache properly. The same was a problem with gatsby-transformer-remark from October to January. And with that the list of providers and their URL schemes are gone when processing the mdx files for links.

It helps to know people would like this option, mixing gatsby-mdx and gatsby-remark-oembed.

Thank you so much for submitting an issue :D

cc: @johno of gatsby-mdx

[donaldboulton]

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

[raae]

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.

[raae]

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

[valse]

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

[fsgreco]

I'm having the same problem.
Don't know if it's helpful but just noticed that scripts from social media are loaded if I do not use gatsbyRemarkPlugins but the old plugins instead:

(although it doesn't respect the "exclude" rule, and treat it like an include, indeed it load twitter script twice)

On the other side when I include the plugin with gatsbyRemarkPlugins as expected the scripts are not loaded:

PS: at the moment I found an extreme "workaround" that consist in including the plugin with plugins as in the first image, and then pasting the embed code of the tweet (all the code that twitter gives you to embedd) inside the mdx file. I don't like it because it loads the twitter script twice and sometimes works sometimes not.

[raae]

Sorry I have not had time yet to look into mdx support. I have a little mdx experience. Things will slow down in a couple of weeks and I might get a chance to have a look.

[raae]

The problem was with me saving the providers to the gatsby cache on onPreBootstrap. This is not called when the plugin is used as a sub plugin of gatsby-plugin-mdx.

@Swizec solution is to check if the cache is set and if not fetch the providers. This leads to the providers being fetched a few times, but better than not working at all.

I am working on moving to a mono repo and getting MDX into the example site before releasing a new version of the package.

[raae]

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.

[iljapanic]

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

[raae]

No, there were some issues in gatsby-plugin-mdx that might have been resolved by now. It would be nice if someone could test it.

[raae]

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

[raae]

MDX works!

It would be great if someone could help add a note about this in the docs and also an example configuration and a new release will happen shortly, see #135.

[mono0x]

I have tried to run gatsby-remark-oembed-mdx-site according to the README, but it didn't work properly. The URLs weren't transformed.

package-lock.json is following.

https://gist.github.com/mono0x/3183e08da4ff23978da746a44f7d0b2f

[daiyanze]

Hi @raae . It seems for MDX the issue is still there. As you mentioned onPreBootstrap is not invoked by gatsby-plugin-mdx. Thought we could simply invoke onPreBootstrap hook to set cache together with the default export function from index.js.

Btw, is this project paused?

---

Here's the workaround I mentioned above. Hope this can help those who still wants to use this plugin.

My approach is to use it as local plugin.

The plugin folder structure may look like this

plugins
└── patched-@raae-gatsby-remark-oembed
    ├── gatsby-browser.js
    ├── gatsby-ssr.js
    ├── index.js
    └── package.json

Then re-export the hooks implemented by the plugin.

// gatsby-broswer.js
const { onInitialClientRender, onRouteUpdate } = require("@raae/gatsby-remark-oembed/gatsby-node")
exports.onInitialClientRender = onInitialClientRender
exports.onRouteUpdate = onRouteUpdate


// gatsby-ssr.js
const { onRenderBody } = require("@raae/gatsby-remark-oembed/gatsby-node")
exports.onRenderBody = onRenderBody


// index.js
const gatsbyRemarkOembed = require("@raae/gatsby-remark-oembed")
const { onPreBootstrap } = require('@raae/gatsby-remark-oembed/gatsby-node')

exports.default = async (...args) => {
  const { cache, reporter } = args[0]
  await onPreBootstrap({ cache, reporter }, args[1])

  return gatsbyRemarkOembed(...args)
}

In your gatsby-configs.js, make sure to resolve the local plugin.

(In my case, I have to use require.resolve)

{
    resolve: `gatsby-plugin-mdx`,
    ...,
    gatsbyRemarkPlugins: [
    ...,
    {
         resolve: require.resolve(`./plugins/patched-@raae-gatsby-remark-oembed`),
         options: {
             usePrefix: ["oembed"],
             providers: {
                exclude: ["Redit"]
             }
         }
     },
    ]   
}

}

[raae]

It has kind of been paused, but I have plans to revive it after easter. I am now much more skilled in Gatsby and plugins so will probably be a major rewrite 🤪

[raae]

Support in the next branch, help test and discuss #159