Using Code Hike from React Server Components

[RyanGaudion]

Hi,

I'm using this with MDXRemote on NextJS 13 (app directory). When I run it normally, I get this error:

./node_modules\@code-hike\mdx\dist\components.esm.mjs
ReactServerComponentsError:

You're importing a component that needs unstable_batchedUpdates. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.

   ,-[C:\...\node_modules\@code-hike\mdx\dist\components.esm.mjs:1:1]
 1 | import React, { createContext, useCallback, useContext, useMemo } from 'react';
 2 | import { unstable_batchedUpdates } from 'react-dom';
   :          ^^^^^^^^^^^^^^^^^^^^^^^
 3 | 
 4 | /******************************************************************************
 4 | Copyright (c) Microsoft Corporation.
   `----

Maybe one of these should be marked as a client entry with "use client":
  ./node_modules\@code-hike\mdx\dist\components.esm.mjs
  ./components\Blog.tsx
  ./app\blog\[slug]\page.tsx

however when I add "use client"; to the Blog Component, I then get this error:

./node_modules/@code-hike/lighter/dist/index.esm.mjs:449:0
Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@code-hike/mdx/dist/index.browser.mjs
./components/Blog.tsx

[pomber]

thanks for reporting, will try to fix this today

[pomber]

Ok, I fixed that problem, but there's a bigger issue: React Server Components don't support the dot in CH.SomeClientComponent. Not sure how I'm going to fix that one yet.

[verdverm]

I came across what I think might be a related issue while debugging my own render errors: vercel/next.js#50471

just an fyi because I thought it might have some amount of overlap

[revskill10]

Same issue :(

[ntotten]

I couldn't get it fully working, but you can work around the CI. issue by doing this:

CodeHike.tsx

"use client";
import { CH } from "@code-hike/mdx/components";
export const Code = CH.Code;
export const Section = CH.Section;
export const SectionLink = CH.SectionLink;
export const SectionCode = CH.SectionCode;
export const Spotlight = CH.Spotlight;
export const Scrollycoding = CH.Scrollycoding;
export const Preview = CH.Preview;
export const annotations = CH.annotations;
export const Annotation = CH.Annotation;
export const Slideshow = CH.Slideshow;
export const InlineCode = CH.InlineCode;
export const CodeSlot = CH.CodeSlot;
export const PreviewSlot = CH.PreviewSlot;
export const StaticToggle = CH.StaticToggle;

Then your MDX components would use:

import * as CH from "./CodeHike";

const components = { CH };

I had another error though after that about a missing node chCodeConfig and gave up at that point. Cool project though!

[charislam]

I tried the intermediate client export file trick and so far it works for me so long as I don't use the annotations features. Those error because

Could not find the module .../CodeHike.tsx#annotations#mark in the React Client Manifest.

I'm guessing React does not include components within CH.annotations because CH.annotations is a map not a component, whereas it successfully includes something like export const Code = CH.Code because CH.Code is a component.