storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.7k stars 9.33k forks source link

[Bug]: Nextjs13 async Server Components Error: Objects are not valid as a React child (found: [object Promise]) #22780

Closed WakuwakuP closed 1 year ago

WakuwakuP commented 1 year ago

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.

// ./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 = {}

To Reproduce

https://stackblitz.com/edit/github-wvzyrp?file=app%2Fpage.js

System

System:
    OS: Windows 10 10.0.22621
    CPU: (24) x64 12th Gen Intel(R) Core(TM) i9-12900
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.50)
  npmPackages:
    @storybook/addon-essentials: 7.0.17 => 7.0.17
    @storybook/addon-interactions: 7.0.17 => 7.0.17
    @storybook/addon-links: 7.0.17 => 7.0.17
    @storybook/addon-mdx-gfm: 7.0.17 => 7.0.17
    @storybook/addon-styling: ^1.0.8 => 1.0.8
    @storybook/blocks: 7.0.17 => 7.0.17
    @storybook/nextjs: 7.0.17 => 7.0.17
    @storybook/react: 7.0.17 => 7.0.17
    @storybook/testing-library: 0.1.0 => 0.1.0

Additional context

No response

guimaferreira commented 1 year ago

+1

I'm facing the same problem. Did you find an workaround @WakuwakuP ?

shilman commented 1 year ago

closing as dupe to #21540

Typhon0130 commented 1 year ago

Hi Guys I have some bug like that Could you help me?