Mdx Support Testers Needed

[raae]

Turns out mdx support had been solved a while back, I just never created a new release. I have now upgraded packages, but not started on my planned larger refactor yet as I want to get mdx support out the door.

To do so I need help testing the "next" version, do so by installing next:

npm i @raae/gatsby-remark-oembed@next

or

yarn add @raae/gatsby-remark-oembed@next

and let me know if it fails in some way (or not).

Nudge: @YoranBrondsema, @daiyanze, @mono0x, @iljapanic, @valse, @Swizec

[daiyanze]

Hi @raae, thank you very much for the update. It works well on my side 👍! I have to say can't wait for the next official release.

FYI, my env

• OS: MacOS 11.6.1
• Node: v16.5
• Gatsby: 4.11.2

---

Btw, I got this output here. Seems it's fetching providers multiple times during build time. Hope this is intended.

info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: No providers in cache
...
info gatsby-remark-oembed: Fetching providers from oembed.com
info gatsby-remark-oembed: Successful embeds: 6 | Node: 8958640c-a331-5e0d-86f8-43eed50791d8

[raae]

So weirdly it now fetches for each mdx file, pretty sure when this fix was introduced it only fetched a couple of times (race condition between the two first mdx nodes to be transformed). Feels like the cache is not working again for mdx subplugins...

[daiyanze]

Will any of my ideas mentioned above come to help?

Seems calling the hooks from mdx plugin is each mdx file based.

[raae]

The oEmbed folks recommend that cms'es etc have their own copy of the providers so when we move over to such a solution then all will be good. However Gatsby needs to solve this cache problem (gatsbyjs/gatsby#35415)...
Meaning I might skip this release and do the re-wamp and then release a 1.0.0 instead where providers are not fetched on build. But as part of the npm package.

[raae]

I managed to do the minimal needed to use the prefetched providers list 🎉
Doing so for both the md and mdx use case.

Would be great if you installed latest version of next and tried again @daiyanze

[daiyanze]

Thank you for the update! Good job there!
Just tested the latest version, it no longer fetches the providers list again and again.

[mono0x]

Thank you for your works to update the plugin. On the latest next branch (e5da035), gatsby-remark-oembed-mdx-site with some modifications worked correctly 🎉

• OS: Linux 5.10.102.1-microsoft-standard-WSL2 #1 SMP Wed Mar 2 00:30:59 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux
• Node: v16.13.2

diff --git a/gatsby-remark-oembed-mdx-site/package.json b/gatsby-remark-oembed-mdx-site/package.json
index ba86add..d3d14a2 100644
--- a/gatsby-remark-oembed-mdx-site/package.json
+++ b/gatsby-remark-oembed-mdx-site/package.json
@@ -15,7 +15,7 @@
   "dependencies": {
     "@mdx-js/mdx": "v1",
     "@mdx-js/react": "v1",
-    "@raae/gatsby-remark-oembed": "0.1.1",
+    "@raae/gatsby-remark-oembed": "^0.2.0-0",
     "dotenv": "16.0.0",
     "gatsby": "^4.11.2",
     "gatsby-plugin-mdx": "^3.11.1",
@@ -27,8 +27,8 @@
     "gatsby-source-filesystem": "^4.11.1",
     "gatsby-transformer-remark": "^5.11.1",
     "gatsby-transformer-sharp": "^4.11.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-typography": "^0.16.13",
     "typeface-merriweather": "1.1.13",
     "typeface-montserrat": "1.1.13",

React 18 cannot be used due to the following error.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected]
npm ERR! node_modules/@mdx-js/react
npm ERR!   @mdx-js/react@"v1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /path/to/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/.npm/_logs/2022-04-11T12_57_50_882Z-debug.log

Next, I would like to test the plugin on a real website as well.

[raae]

Interesting, I will have to test again locally as I got it running. But it does seem like a problem with @mdx-js/react and not the plugin per se.

[raae]

Thank you so much for testing btw.

[raae]

Could you share more about your process as I can not reproduce?

[mono0x]

@raae Thank you for your comment.

I only checked out the repo and tried to install @raae/gatsby-remark-oembed@next to gatsby-remark-oembed-mdx-site.

> git clone [email protected]:queen-raae/gatsby-remark-oembed.git
> cd /path/to/gatsby-remark-oembed/gatsby-remark-oembed-mdx-site
> git checkout next
> git clean -fdx # Clean .cache, node_modules, and package-lock.json
> npm i @raae/gatsby-remark-oembed@next

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected]
npm ERR! node_modules/@mdx-js/react
npm ERR!   @mdx-js/react@"v1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /path/to/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/.npm/_logs/2022-04-12T11_36_21_248Z-debug.log

It is reproduced on both Ubuntu 20.04 on WSL2 and macOS 12.2.1.

However, npm i --force @raae/gatsby-remark-oembed@next is succeeded, and npm run build is also worked.

> npm i --force @raae/gatsby-remark-oembed@next
> cat package-lock.json # => https://gist.github.com/mono0x/03237c9361cc43af0c06e7c355812c76
> npm run build

In package-lock.json, @mdx-js/react depends on "react": "^16.13.1 || ^17.0.0" as peerDependencies. Therefore, I think react v18 may not be used with @mdx-js/react v1 by the dependency specification.

https://gist.github.com/mono0x/03237c9361cc43af0c06e7c355812c76#file-package-lock-json-L3082

[raae]

There might be some funny business as that site is part of the monorepo. But will do some more tests.