Make remarkCodeHike work at Next.js edge runtime #489
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
:I noticed that
page.tsx
import fs from "fs", which is not available in edge. So I just hard codesource
to test if Code Hike works.Unfortunately, it threw an
compile error
caused by import "fs" module inside ofcodehike/dist/mdx.js
.Then I found the problematic code:
codehike/packages/codehike/src/mdx/0.import-code-from-path.ts
Lines 56 to 64 in 7e7b78d
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
torequire
resolves this issue. Becauserequire
imports modules at runtime, whileimport
does so at compile time.