Unable to load mdx-embed after updating to MDX 2

[payapula]

Describe the bug

I am using mdx-embed in my nextjs application along with next-mdx-remote package. I have upgraded the next-mdx-remote package to 4.1.0 which has new MDX 2 features. After upgrading I am getting the following error in mdx-embed package

Error: require() of ES Module blog/node_modules/@mdx-js/react/index.js from /node_modules/mdx-embed/dist/components/mdx-embed-provider/mdx-embed-provider.js not supported.
Instead change the require of index.js in blog/node_modules/mdx-embed/dist/components/mdx-embed-provider/mdx-embed-provider.js to a dynamic import() which is available in all CommonJS modules.

Since, MDX 2 migrated to use complete ESM packages, the require import of mdx-embed is throwing error. Is it possible to compile this package in ESM?

To Reproduce

My branch with the upgraded packages - https://github.com/payapula/blog/tree/feature/next_chakra_upgrades_react_18

1. Clone project - https://github.com/payapula/blog
2. Checkout - https://github.com/payapula/blog/tree/feature/next_chakra_upgrades_react_18
3. npm install
4. npm run dev
5. Open - http://localhost:3001/blog/what-is-this-javascript

Expected behavior There should not be any errors referring to mdx-embed pacakge

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: chrome
• Version 103

Additional context

I think if we can migrate this project to ESM, we could solve this issue. Any help on this would be appreciated. Also happy to contribute PRs.

[mbifulco]

I've been wrestling with this issue for a while myself - @PaulieScanlon is there anything we can do to help here?

[PaulieScanlon]

Hey @mbifulco. I'm close to being able to investigate this. Gatsby released v4 of their plugin earlier this week with MDX 2 support. At present this package is only tested with MDX 1.

Stay tuned!

[dsebastien]

Just discovered I also suffer from this issue as I'm trying to migrate to MDX 2. Is there any way for me to help move this forward?

[PaulieScanlon]

@dsebastien Hey. I'm currently in the process upgrading all packages to MDX 2. Hopefully early next week I'll have an alpha cut ready for you to try out.

[ericclemmons]

For a quick fix, I've been able to work around this by converting:

import { CodeSandbox, Gist, Tweet, YouTube } from "mdx-embed";

to

import { CodeSandbox } from "mdx-embed/dist/components/codesandbox";
import { Gist } from "mdx-embed/dist/components/gist";
import { Tweet } from "mdx-embed/dist/components/twitter";
import { YouTube } from "mdx-embed/dist/components/youtube";

[dsebastien]

Any news about this issue?

[libhide]

Struggling with this issue as well.