The issue

I am trying to integrate Code Hike into a Next.js project using the Edge Runtime. I referred to this project:

https://github.com/code-hike/examples/tree/next-mdx-remote/with-next-mdx-remote-rsc

and added this line of code to page.tsx:

export const runtime = "edge"

I noticed that page.tsx import fs from "fs", which is not available in edge. So I just hard code source to test if Code Hike works.

- import { promises as fs } from "fs"
+ export const runtime = "edge"
export default async function Home() {
- const source = await fs.readFile("./content/index.md", "utf-8")
+ const source = "# title";
 const { content } = await compileMDX({
 source,
 components,
 options: {

Unfortunately, it threw an compile error caused by import "fs" module inside of codehike/dist/mdx.js.

Then I found the problematic code:

When using Webpack, dynamic imports with import() can prevent exceptions from being caught by try-catch.

Even if I didn’t use Code Hike’s !from feature to import external code.

The solution

Changing import to require resolves this issue. Because require imports modules at runtime, while import does so at compile time.