'SomeComponent' cannot be used as a JSX component. #42292

professorhaseeb · 2022-11-01T11:50:10Z

Verify canary release

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 Pro
    Binaries:
      Node: 18.12.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.0.1-canary.4
      eslint-config-next: 13.0.0
      react: 18.2.0
      react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Any components are producing IDE error but builds successfully.

'SomeComponent' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'ReactElement<any, any>': type, props, key `ts(2786)`

Expected Behavior

probably not give an error when using async components

Link to reproduction

no link

To Reproduce

// ~/component/SomeComponent.tsx

export default async function SomeComponent() {
    let categories: any = await getCategories()
    return ...
}

The text was updated successfully, but these errors were encountered:

icyJoseph · 2022-11-01T12:47:32Z

I think a fix is upcoming, but pretty much the issue is that TypeScript doesn't understand async components... It always expects JSX as child, not Promise<JSX>.

Many are type casting the component and exporting that type casted version... I think it might be better to do:

import { RSCList } from "../../../components/RSCList";

export default function Page({ params }: { params: { id: string } }) {
  return (
    <div>
      Order: {params.id}
      <div>
        {/* @ts-expect-error Server Component */}
        <RSCList />
      </div>
    </div>
  );
}

When the types are fixed, the @ts-expect-error directive will complain that it is unused...

This fix might come from the next typescript plugin I think, not sure.

professorhaseeb · 2022-11-01T13:07:47Z

@icyJoseph

{/* @ts-expect-error Server Component */} worked for now.

Thanks

saidMounaim · 2022-11-05T17:20:29Z

Thanks @icyJoseph

{/* @ts-expect-error Server Component */} worked for me

timneutkens · 2022-11-05T17:39:43Z

This particular error is hardcoded in TypeScript. The React team is working with the TypeScript team to resolve this. For now you can use the recommendation above 👍

leerob · 2022-11-05T20:31:31Z

Just added a few notes about this workaround to the beta docs as well, thank you!

diegohaz · 2022-12-29T15:23:15Z

The React team is working with the TypeScript team to resolve this.

Is there a public issue/PR on the TypeScript repo where that work can be followed?

is-it-ayush · 2023-01-03T05:22:03Z

The {/* @ts-expect-error Server Component */} get's rid of the typescript error as mentioned by icyJoseph. However, This produces a different Server 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.. Unsure If I'm doing something wrong. I'm using a RSC in the /pages directory which is Promise<JSX.Element> and returns a list. The data to it is passed via gssp and props.

My guess is that the Promise is not resolved at the time of rendering. Hence, the error. If this is so, any workarounds until it is fixed.

dantman · 2023-01-06T20:12:16Z

However, This produces a different Server 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.. Unsure If I'm doing something wrong. I'm using a RSC in the /pages directory which is Promise<JSX.Element> and returns a list. The data to it is passed via gssp and props.

To my understanding server components are only available in the new app/ folder not pages/ so that would be the cause of your issue.

is-it-ayush · 2023-01-08T05:37:24Z

However, This produces a different Server 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.. Unsure If I'm doing something wrong. I'm using a RSC in the /pages directory which is Promise<JSX.Element> and returns a list. The data to it is passed via gssp and props.

To my understanding server components are only available in the new app/ folder not pages/ so that would be the cause of your issue.

Ah Yes. I was not aware of it. In a sandbox I was able to reproduce the above error which I was expecting in /pages directory. Then I switched to beta /app directory and it worked charmingly. I now understand why it happened. Thanks @dantman!

bongdungyeuem27 · 2023-01-10T17:30:13Z

You only use async component inside app folder and server component.

gaithoben · 2023-01-12T07:16:56Z

The issue may have been introduced to your project via some other packages' peer dependency.

If you have a .tsconfig file, Add following to compilerOptions:

"paths": {
"react": [ "./node_modules/@types/react" ]
}

Kamrulhasan12345 · 2023-01-17T05:30:22Z

Don't know why, but I am using app directory, but I can still see, 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. issue while rendering

mstachalski · 2023-01-20T12:17:07Z

Same here, I am passing a SSC as a child to a CSC. Both are wrapped in a SSC as mentioned in the Nextjs Docs.
Still I am getting the error "TS2786: 'TopicCardContent' cannot be used as a JSX component."

<TopicCard side={"left"}><TopicCardContent /></TopicCard>

bgdnvk · 2023-02-09T16:29:37Z

I'm using NextJS 13, the error still persists if you pass async server components. But {/* @ts-expect-error Server Component */} makes it work, would love to have a non-hacky way to approach this.

Kamrulhasan12345 · 2023-02-10T02:51:12Z

@bgdnvk Mine is a render-time error, so this doesn't get mine working.

sjohns21 · 2023-02-27T23:24:57Z

I upgraded my package types:
"@types/node": "18.14.2",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
and it was resolved!

roniaxe · 2023-02-28T00:11:25Z

I upgraded my package types: "@types/node": "18.14.2", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", and it was resolved!

Didn't work for me.

sooohka · 2023-03-02T08:31:30Z

I upgraded my package types: "@types/node": "18.14.2", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", and it was resolved!

didn't work either :(

AveshLutchman · 2023-03-03T12:22:43Z

I upgraded my package types: "@types/node": "18.14.2", "@types/react": "18.0.28", "@types/react-dom": "18.0.11", and it was resolved!

Didn't work for me, on most recent for each as well.

BurgerZ · 2023-03-10T16:20:51Z

I'm on Next.js 13 and I've found two workarounds:

First one is using a const:

async function Page() {
    const asyncComponent: JSX.Element = await AsyncComponent({ props: any })
    return (
        <Suspense fallback={<>Loading...</>}>
            ......
            {asyncComponent}
            ......
        </Suspense>
    )
}

Second one is using {/* @ts-expect-error Server Component */}:

async function Page() {
    return (
        <Suspense fallback={<>Loading...</>}>
            ......
            {/* @ts-expect-error Server Component */}
            <AsyncComponent />
            ......
        </Suspense>
    )
}

vercel/next.js#42292

hiendaovinh · 2023-03-15T09:35:37Z

The problem with {/* @ts-expect-error Server Component */} is that it will silence other typing errors.

sami616 · 2023-03-20T09:08:47Z

@hiendaovinh

Here is a wonky workaround which gets around the issue without losing all type safety for your incoming props. 👇🏼

type UserPostsProps = {
  userId: number
}

async function UserPosts({ userId }: UserPostsProps) {
  const userPosts: any = await fetch(
    `https://jsonplaceholder.typicode.com/posts?userId=${userId}`
  ).then(res => res.json())

  return (
    <ul>
      {userPosts.map((post: any) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// As a temporary work around, we can override the type so that it returns a JSX.Element instead of a Promise 
const _UserPosts = UserPosts as unknown as (props: UserPostsProps) => JSX.Element
export { _UserPosts as UserPosts }

lucgagan · 2023-06-07T21:31:03Z

Didn't expect this to work, but nuking node_modules and pnpm-lock.yarn and re-installing actually fixed the issue.

qmmr · 2023-06-09T14:57:09Z

In my case that was enough 💪

diff --git a/package.json b/package.json
index b5f95bd..c53ca79 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
-    "@types/react": "18.2.7",
+    "@types/react": "18.2.9",
     "@types/react-dom": "18.2.4",
@@ -33,7 +33,7 @@
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },

travistylervii · 2023-06-09T23:36:37Z

Finally worked:

Updated packages.

"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"typescript": "^5.1.3"

Nuked node_modules.
Nuked package-lock.json
Restarted Typescript & ESlist server.
Sold my first born to the coding gods.
Restarted VS Code.

No error. :')

tomosnam · 2023-06-12T02:16:13Z

This is what nextjs doc says: https://nextjs.org/docs/app/building-your-application/configuring/typescript)

urakymzhan · 2023-06-12T16:50:45Z

It worked with ts: 18 and react/types: 18
Thanks all

wisteria-hill-technologies · 2023-06-13T20:45:08Z

Unfortunately, upgrading typescript solves the "cannot be used as a JSX component" error, but it will break eslint for me with eslint-config-next in next/core-web-vitals.
My IDE webstorm can no longer detect .eslintrc.json.
{
"extends": ["next/core-web-vitals"]
}

fakhrads · 2023-06-16T08:56:03Z

Finally worked:

Updated packages.
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"typescript": "^5.1.3"
Nuked node_modules.

Nuked package-lock.json

Restarted Typescript & ESlist server.

Sold my first born to the coding gods.

Restarted VS Code.

No error. :')

This guide fixed my issue

shubasishdas · 2023-06-20T18:29:18Z

Finally worked:

Updated packages.
"@types/react": "^18.2.8",
"@types/react-dom": "^18.2.4",
"typescript": "^5.1.3"
Nuked node_modules.

Nuked package-lock.json

Restarted Typescript & ESlist server.

Sold my first born to the coding gods.

Restarted VS Code.

No error. :')

This guide along with this link fixed my issue - https://nextjs.org/docs/app/building-your-application/configuring/typescript

hydRAnger · 2023-06-23T01:31:37Z

I found this issue will occur again if upgrade to 😕

    "@types/react": "18.2.13",
    "@types/react-dom": "18.2.6",
    "typescript": "5.1.3"

but below works

   "@types/react": "18.2.12",
   "@types/react-dom": "18.2.5",
   "typescript": "5.1.3"

fanzypantz · 2023-06-23T13:58:25Z

I found this issue will occur again if upgrade to 😕

    "@types/react": "18.2.13",
    "@types/react-dom": "18.2.6",
    "typescript": "5.1.3"

but below works

   "@types/react": "18.2.12",
   "@types/react-dom": "18.2.5",
   "typescript": "5.1.3"

What react verrsion? I am on latest and still got errors from these versions.

hydRAnger · 2023-06-25T13:59:01Z

I found this issue will occur again if upgrade to 😕
    "@types/react": "18.2.13",
    "@types/react-dom": "18.2.6",
    "typescript": "5.1.3"
but below works
   "@types/react": "18.2.12",
   "@types/react-dom": "18.2.5",
   "typescript": "5.1.3"
What react verrsion? I am on latest and still got errors from these versions.

    "react": "18.2.0",
    "react-dom": "18.2.0",

noviceGuru · 2023-06-26T13:51:22Z

For who wants to test an `async Component` :

In my opinion it makes sense for TypeScript to throw an error, after all this is an async function and may return a Promise. So, I would await it to return the JSX we are expecting:

test('RSCList  renders correctly', async () => {
	 render(
		await (async () => await RSCList())()
	 )

	expect(...).toBe(...)
})

timneutkens · 2023-07-03T08:47:47Z

Based on https://twitter.com/sebsilbermann/status/1664356039876124672 I created a new Next.js application using create-next-app and was able to verify it works now.

pnpm create next-app --typescript typescript-async-component
Changed app/page.tsx:

async function MyComponent() {
  await new Promise((resolve) => {
    setTimeout(resolve, 500);
  });

  return <h1>Hello World</h1>;
}

And added:

<div className={styles.center}>
  <MyComponent />
</div>

Great work @eps1lon!

In my opinion it makes sense for TypeScript to throw an error, after all this is an async function and may return a Promise. So, I would await it to return the JSX we are expecting:

The latest version of React (specifically for server components) supports async functions as JSX, TypeScript just wasn't up to date with that yet.

stefanprobst · 2023-07-03T09:44:55Z

@timneutkens i am still seeing an error with an explicit Promise<ReactNode> return type annotation: "Type is referenced directly or indirectly in the fulfillment callback of its own 'then' method.ts(1062)"

see #42292 (comment)

pawelblaszczyk5 · 2023-07-03T09:51:09Z

@timneutkens i am still seeing an error with an explicit Promise<ReactNode> return type annotation: "Type is referenced directly or indirectly in the fulfillment callback of its own 'then' method.ts(1062)"

see #42292 (comment)

ReactNode now basically includes the Promise<ReactNode> part atm, so your type is recursive and never ends 😄 If you really want to explicitly type it - using just a ReactNode should be fine

stefanprobst · 2023-07-03T10:02:55Z

ReactNode now basically includes the Promise part atm, so your type is recursive and never ends smile If you really want to explicitly type it - using just a ReactNode should be fine

hmm, async function SomeComponent(): ReactNode { /** */ } results in: "The return type of an async function or method must be the global Promise type. Did you mean to write 'Promise<string | number | boolean | ReactElement<any, string | JSXElementConstructor> | Iterable | ReactPortal | null | undefined>'? ts(1064)"

pawelblaszczyk5 · 2023-07-03T10:11:02Z

ReactNode now basically includes the Promise part atm, so your type is recursive and never ends smile If you really want to explicitly type it - using just a ReactNode should be fine

hmm, async function SomeComponent(): ReactNode { /** */ } results in: "The return type of an async function or method must be the global Promise type. Did you mean to write 'Promise<string | number | boolean | ReactElement<any, string | JSXElementConstructor> | Iterable | ReactPortal | null | undefined>'? ts(1064)"

Oh, that's strange, I've checked it now and I see this issue as well. Maybe it's because the underlying type is using PromiseLike instead of native Promise interface 🤔 Because it seems like it gets stripped in proposed type

I personally don't use explicit return types so I don't have an idea for a good solution here, sorry. Though, it's not related to this issue tbh, it's just a typing problem

eps1lon · 2023-07-03T14:03:35Z

Promise<React.ReactNode> seems to work just fine with latest types: Playground Link

The only bug we need to fix in types/react is that async is only for experimental when it's already available in canary.

jacobsfletch · 2023-07-06T04:57:47Z

Bumping @types/react to v18.2.14 fixed this for me in dev, but for some reason its still throwing an error when building 🤷

I also tried explicitly typing the return of my component to Promise<React.ReactNode> like @stefanprobst suggested but that is throwing the same error for me as was reported. For now I get around this by using @ts-expect-error but ts thinks this directive is unused:

jjm2317 · 2023-07-06T09:07:44Z

If you are using the jsxImportSource option in tsconfig.json, there is a possibility that the issue you encountered could be due to the outdated version of the related jsx parsing module.

In my case, I was using the "jsxImportSource": "@emotion/react" option in tsconfig.json. When I updated @types/react from version 18.0 to 18.2.14, I faced the problem 'Component' cannot be used as a JSX component. I found that this issue was fixed in the release version 11.11.1 of @emotion/react, as mentioned in https://github.com/emotion-js/emotion/releases/tag/%40emotion%2Freact%4011.11.1. After updating @emotion/react to the latest version, the problem was resolved.

karlhorky · 2023-07-06T09:44:06Z

More background on the @emotion/react problem (fixed in @emotion/react@11.11.1):

@types/react@18.2.8 + jsxImportSource: @emotion/react = Its return type 'ReactNode' is not a valid JSX element. emotion-js/emotion#3049

ghost · 2023-07-07T02:52:20Z

Bumping @types/react to v18.2.14 fixed this for me in dev, but for some reason its still throwing an error when building 🤷

I also tried explicitly typing the return of my component to Promise<React.ReactNode> like @stefanprobst suggested but that is throwing the same error for me as was reported. For now I get around this by using @ts-expect-error but ts thinks this directive is unused:

@jacobsfletch
Make sure your devDependencies are updated. I noticed mine weren't on my Nextjs package in my monorepo

WooodHead · 2023-07-08T03:37:30Z

I solved this problem with following steps (if you are using VSCode):

npm install -g typescript@lastest
Install extension: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

Source: https://stackoverflow.com/a/65151679/3317931

Latest Typescript version has fixed this error.

github-actions · 2023-08-07T12:01:39Z

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.

professorhaseeb added the bug Issue was opened via the bug report template. label Nov 1, 2022

shuding assigned shuding and unassigned shuding Nov 2, 2022

timneutkens added Upstream Related to using Next.js with a third-party dependency. (e.g., React, UI/icon libraries, etc.). area: app App directory (appDir: true) kind: bug and removed bug Issue was opened via the bug report template. labels Nov 5, 2022

glennreyes added a commit to glennreyes/glennreyes.com that referenced this issue Mar 11, 2023

Add temporary workaround for async JSX

b3c4097

vercel/next.js#42292

timneutkens closed this as completed Jul 3, 2023

timneutkens added linear: next Confirmed issue that is tracked by the Next.js team. and removed linear: next Confirmed issue that is tracked by the Next.js team. labels Jul 3, 2023

github-actions bot added the locked label Aug 7, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 7, 2023

'SomeComponent' cannot be used as a JSX component. #42292

'SomeComponent' cannot be used as a JSX component. #42292

Comments

professorhaseeb commented Nov 1, 2022

Verify canary release

Provide environment information

What browser are you using? (if relevant)

How are you deploying your application? (if relevant)

Describe the Bug

Expected Behavior

Link to reproduction

To Reproduce

icyJoseph commented Nov 1, 2022

professorhaseeb commented Nov 1, 2022

saidMounaim commented Nov 5, 2022

timneutkens commented Nov 5, 2022

leerob commented Nov 5, 2022

diegohaz commented Dec 29, 2022

is-it-ayush commented Jan 3, 2023

dantman commented Jan 6, 2023

is-it-ayush commented Jan 8, 2023

bongdungyeuem27 commented Jan 10, 2023

gaithoben commented Jan 12, 2023

Kamrulhasan12345 commented Jan 17, 2023

mstachalski commented Jan 20, 2023

bgdnvk commented Feb 9, 2023

Kamrulhasan12345 commented Feb 10, 2023

sjohns21 commented Feb 27, 2023

roniaxe commented Feb 28, 2023

sooohka commented Mar 2, 2023

AveshLutchman commented Mar 3, 2023

BurgerZ commented Mar 10, 2023

hiendaovinh commented Mar 15, 2023

sami616 commented Mar 20, 2023 • edited Loading

lucgagan commented Jun 7, 2023

qmmr commented Jun 9, 2023

travistylervii commented Jun 9, 2023

tomosnam commented Jun 12, 2023

urakymzhan commented Jun 12, 2023

wisteria-hill-technologies commented Jun 13, 2023 • edited Loading

fakhrads commented Jun 16, 2023

shubasishdas commented Jun 20, 2023

hydRAnger commented Jun 23, 2023 • edited Loading

fanzypantz commented Jun 23, 2023

hydRAnger commented Jun 25, 2023

noviceGuru commented Jun 26, 2023

For who wants to test an async Component :

timneutkens commented Jul 3, 2023

stefanprobst commented Jul 3, 2023

pawelblaszczyk5 commented Jul 3, 2023 • edited Loading

stefanprobst commented Jul 3, 2023 • edited Loading

pawelblaszczyk5 commented Jul 3, 2023

eps1lon commented Jul 3, 2023

jacobsfletch commented Jul 6, 2023

jjm2317 commented Jul 6, 2023

karlhorky commented Jul 6, 2023 • edited Loading

ghost commented Jul 7, 2023 • edited by ghost Loading

WooodHead commented Jul 8, 2023 • edited Loading

github-actions bot commented Aug 7, 2023

sami616 commented Mar 20, 2023 •

edited

Loading

wisteria-hill-technologies commented Jun 13, 2023 •

edited

Loading

hydRAnger commented Jun 23, 2023 •

edited

Loading

For who wants to test an `async Component` :

pawelblaszczyk5 commented Jul 3, 2023 •

edited

Loading

stefanprobst commented Jul 3, 2023 •

edited

Loading

karlhorky commented Jul 6, 2023 •

edited

Loading

ghost commented Jul 7, 2023 •

edited by ghost

Loading

WooodHead commented Jul 8, 2023 •

edited

Loading