Skip to content

Unable to load mdx-embed after updating to MDX 2 #247

Open
@payapula

Description

@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

Screenshot 2022-08-04 at 1 50 39 PM

Screenshot 2022-08-04 at 1 51 23 PM

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions