Error [ERR_REQUIRE_ESM]: require() of ES Module

[lumenwrites]

I'm trying to complie mdx like this:

import { serialize } from 'next-mdx-remote/serialize'
import matter from 'gray-matter'

export async function renderMDX(text) {
  const { data: frontmatter, content } = matter(text)
  const serialized = await serialize(content, {
    scope: frontmatter,
  })
  return serialized
}

I run this script with typescript, and I get the following error:

/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:851
            return old(m, filename);
                   ^
Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/lumen/projects/Webdev/obsidian-blog/node_modules/next-mdx-remote/serialize.js from /Users/lumen/projects/Webdev/obsidian-blog/content/render-mdx.ts not supported.
Instead change the require of serialize.js in /Users/lumen/projects/Webdev/obsidian-blog/content/render-mdx.ts to a dynamic import() which is available in all CommonJS modules.
    at require.extensions.<computed> [as .js] (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:851:20)
    at Object.<anonymous> (/Users/lumen/projects/Webdev/obsidian-blog/content/render-mdx.ts:7:21)
    at m._compile (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (/Users/lumen/projects/Webdev/obsidian-blog/content/process-posts.ts:10:22)
    at m._compile (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:859:16)
    at Object.<anonymous> (/Users/lumen/projects/Webdev/obsidian-blog/content/process-content.ts:8:25)
    at m._compile (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:857:29)
    at require.extensions.<computed> [as .ts] (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/index.js:859:16)
    at phase4 (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/bin.js:466:20)
    at bootstrap (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/bin.js:54:12)
    at main (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/bin.js:33:12)
    at Object.<anonymous> (/Users/lumen/projects/Webdev/obsidian-blog/node_modules/ts-node/dist/bin.js:579:5) {
  code: 'ERR_REQUIRE_ESM'
}

Do you know what I could do to fix it?

[lumenwrites]

Small script reproducing the error: https://github.com/lumenwrites/next-mdx-remote-import-issue/blob/main/src/index.ts

[talatkuyuk]

Hi @lumenwrites, did you find a solution?

[SuperchupuDev]

Getting this problem after updating to next 14.2, I use type: module in my package.json

[dstaley]

@SuperchupuDev can you try with next-mdx-remote@0.0.0-canary-20240321205249 and let me know if you're still experiencing this issue?

[SuperchupuDev]

@dstaley still getting the same error

[SuperchupuDev]

Using next dev --turbo warns that this package is invalid btw (doing the same without turbo also throws an error but it is less informative)

[dstaley]

I think this might be a result of next-mdx-remote being ESM only. While I investigate whether that's the case you should be able to work around this issue by adding transpilePackages: ["next-mdx-remote"] to your next.config.js.

[lei-cao]

I had the same problem. seems it some how because after creating nextjs + payload demo blog website (https://github.com/payloadcms/public-demo), the folder structure is

src/app (nextjs app) src/payload (payload cms backend) node_modules package.json ...

so basically nextjs app and payload is sharing the same root packages.

What I did to fix this was, I installed (pnpm add next-mdx-remote) in the inner folder of the nextjs app which is src/app. It solved this ERR_REQUIRE_ESM issue (didn't do transpilePackages: ["next-mdx-remote"]) , but facing another issue mentioned here https://github.com/hashicorp/next-mdx-remote/issues/416 , so I pnpm add next-mdx-remote@canary in the inner folder, both issues solved. now I can use it normally.

I am not sure about the exactly reason, just somehow the importing was not working and add it to the of nextjs root folder, it worked.

[SuperchupuDev]

@dstaley I think I finally found out how to solve my problem without adding it to transpilePackages. serialize isn't meant to be used in the app router, and changing it to just use MDXRemote from /rsc solved it. It'd be nice if the examples from the README specified they are meant to be used in the pages router, the info is only really provided near the bottom of the readme