code-hike/examples

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Closed this issue · 5 comments

donghhan commented

Hi, I am migrating from version 0.9.0 to 1.0.0 with nextra. While I am following code boilerplate that you provided, I got some errors below while I make Code component as asynchronous.

// code.tsx

import { HighlightedCode, Pre, highlight, RawCode } from "codehike/code";
import { diff } from "./utils/diff";

export async function Code({ codeblock }: { codeblock: HighlightedCode }) {
  const highlighted = await highlight(codeblock, "github-dark");

  return (
    <Pre
      code={codeblock}
      handlers={[callout, className, lineNumbers, link, mark, wordWrap, diff]}
      className="border border-zinc-500/50 rounded py-2 px-4 my-4"
      style={codeblock.style}
    />
  );
}

and I got following errors:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6190:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderNode (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6270:12)
    at renderChildrenArray (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6222:7)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6152:7)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5982:9)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
 ⨯ Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6190:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderNode (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6270:12)
    at renderChildrenArray (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6222:7)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6152:7)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5982:9)
    at renderNodeDestructiveImpl (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6115:11)
    at renderNodeDestructive (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6087:14)
    at renderIndeterminateComponent (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5786:7)
    at renderElement (/Users/apensia/dev/apensia-nextra-devblog/node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5957:7) {
  page: '/index.ko'
}

Am I missing something?

pomber commented

async components are only possible when you use React Server Components. Looks like you are using Nextra, so you can edit it like this:

export function Code({ codeblock }: { codeblock: HighlightedCode }) {
  const highlighted = codeblock 
  return ...

Read more here.

donghhan commented

@pomber Thanks for the swift response. Although problem solved, it still does not allow me to apply some code examples such as code mentions.

  1. code-mentions.tsx code
// code-mentions.tsx components 

import {
  AnnotationHandler,
  InnerLine,
  Pre,
  RawCode,
  highlight,
} from "codehike/code";
import React from "react";
import style from "./styles.module.css";

export function HoverContainer(props: { children: React.ReactNode }) {
  return <div className={style.hover_container}>{props.children}</div>;
}

function Link(props: { href?: string; children?: React.ReactNode }) {
  if (props.href?.startsWith("hover:")) {
    const hover = props.href.slice("hover:".length);
    return (
      <span
        className="underline decoration-dotted underline-offset-4"
        data-hover={hover}
      >
        {props.children}
      </span>
    );
  } else {
    return <a {...props} />;
  }
}

async function Code({ codeblock }: { codeblock: RawCode }) {
  const highlighted = await highlight(codeblock, "github-dark");
  return <Pre code={highlighted} handlers={[hover]} />;
}

export const hover: AnnotationHandler = {
  name: "hover",
  onlyIfAnnotated: true,
  Line: ({ annotation, ...props }) => (
    <InnerLine
      merge={props}
      className="transition-opacity"
      data-line={annotation?.query || ""}
    />
  ),
};
  1. Code configuration
"use client";
import { HighlightedCode, Pre, highlight, RawCode } from "codehike/code";
import { callout } from "./utils/callout";
import { className } from "./utils/classname";
import { hover } from "./utils/code-mentions";


export function Code({ codeblock }: { codeblock: HighlightedCode }) {
  const highlighted = codeblock;

  return (
    <Pre
      code={highlighted}
      handlers={[callout, className, hover]}
      className="border border-zinc-500/50 rounded py-2 px-4 my-4"
      style={codeblock.style}
    />
  );
}
  1. Actual MDX document
import { HoverContainer } from "../components/utils/code-mentions";

<HoverContainer>

The [base case](hover:one) returns 1.

```cpp
int factorial(int n) {
  if (n == 0) {
    // !hover one
    return 1;
  } else {
    // !hover two
    return n * factorial(n - 1);
  }
}

The [recursive case](hover:two) multiplies something.

Even by doing this, this does not apply the code-mention example as it shown on your documentation. Do I need to give up some features like this? Which might be kinda sad

pomber commented

Do I need to give up some features like this?

Code mentions should work even without RSC, most things should work. The only things that aren't supported without RSC are the ones that NEED to call some async function (the typescript and transpile examples).

pomber commented

if you need help with a specific case, the best way for me to help is if you open an issue in https://github.com/code-hike/codehike including a link to a minimal stackblitz with a reproduction of the issue

donghhan commented

I thought this is Nextra specific only so that's why I posted. But understood your advice and will re-issue on this later. Closing issue.