The server component that fetch data in Nextjs13 becomes "Promise " and can not be drawn in Storybook.
Storybook Error : 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.
// ./src/app/page.tsx
async function getData() {
const res = await fetch('https://api.example.com/...');
if (!res.ok) {
throw new Error('Failed to fetch data');
}
return res.json();
}
export default async function Page() {
const data = await getData();
return <main></main>;
}
// ./src/app/page.stories.tsx
import { Meta, StoryObj } from '@storybook/react'
import page from './page'
const meta: Meta<typeof page> = {
component: page,
tags: ['autodocs'],
args: {},
argTypes: {},
}
export default meta
type Story = StoryObj<typeof page>
export const Default: Story = {}
Describe the bug
The server component that fetch data in Nextjs13 becomes "Promise" and can not be drawn in Storybook.
Storybook Error :
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.
To Reproduce
https://stackblitz.com/edit/github-wvzyrp?file=app%2Fpage.js
System
Additional context
No response