Error: Objects are not valid as a React child (found: [object Promise]) when using async components

[incepter]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.18.0
      npm: N/A
      Yarn: N/A
      pnpm: 7.14.0
    Relevant packages:
      next: 13.1.1
      eslint-config-next: 13.1.1
      react: 18.2.0
      react-dom: 18.2.0

warn  - Latest canary version not detected, detected: "13.1.1", newest: "13.1.2-canary.4".
        Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
        Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) of Next.js are affected? (leave empty if unsure)

Data fetching (gS(S)P, getInitialProps)

Link to the code that reproduces this issue

https://codesandbox.io/s/brave-dew-djemfd?file=/pages/index.tsx

To Reproduce

• Create a new next app
• go to index page and turn the default export to async function

Describe the Bug

As shown in the images, it doesn't accept mount a Promise as component.

The example is suggested straight from the docs.

I saw two bugs, the first is saying that it cannot handle Promises, and the second is that we loose the React current dispatcher.

Expected Behavior

Use the new server components Promises capabilities

Which browser are you using? (if relevant)

chrome latest

How are you deploying your application? (if relevant)

No response

[Fredkiss3]

You can't use async components in the pages directory, only in app directory. And bear in mind that async components are only for server-components, you can't use them for client components.

[incepter]

Thanks for the clarification. You are right, I was following the get started and the selling points of next13 straight from the official docs.

It would be nice to highlight that, to perform data fetching using next like adviced in the docs, you should first do an upgrade step, that I find unnecessary for people first time using next like me, and can be directly setup up upfront.

[Fredkiss3]

Are you using next stable docs ? or beta docs ? Because in beta docs, it is said to install next with app dir with this command :

npx create-next-app@latest --experimental-app

the flag --experimental-app is for enabling the app directory which is still experimental. And in the stable docs they don't mention about async components.

[incepter]

Are you using next stable docs ? or beta docs ? Because in beta docs, it is said to install next with app dir with this command :

I can't honestly tell, since i really wrote

nextjs get started in google then followed the first links.

I did stick to "getStaticProps" to do my experiments for now. But stuck again against not being able to deserialize undefined :-)

Thanks for your help @Fredkiss3 🙏

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.