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.
donghhan opened this issue · comments
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?
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 ...
@pomber Thanks for the swift response. Although problem solved, it still does not allow me to apply some code examples such as code mentions.
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 || ""}
/>
),
};
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}
/>
);
}
- 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
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).
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
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.