codehike icon indicating copy to clipboard operation
codehike copied to clipboard

Using Code Hike from React Server Components

Open RyanGaudion opened this issue 2 years ago • 6 comments

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

RyanGaudion avatar Mar 21 '23 19:03 RyanGaudion