Plugin does not work when configured as a gatsby-mdx gatsbyRemarkPlugin about gatsby-remark-oembed HOT 17 CLOSED

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

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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.

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.

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"]
             }
         }
     },
    ]   
}

}

from gatsby-remark-oembed.

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 🤪

from gatsby-remark-oembed.

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

from gatsby-remark-oembed.