its type '() => promise<element>' is not a valid jsx element type

[aleynaeser]

Summary

I encountered this error after deleting the node_modules folder and reinstalling dependencies. The project has been working fine for over a year with no errors, and I haven't made significant changes to the code.

Additional Context:

"next": "14.2.6",
"react": "^18",
"react-dom": "^18",
"typescript": "^5"
"eslint": "^8",
"eslint-config-next": "14.2.6",

Its type '({ systemCompanyAddress }: ISystemCompanyInfo) => Promise<Element>' is not a valid JSX element type.
    Type '({ systemCompanyAddress }: ISystemCompanyInfo) => Promise<Element>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Promise<Element>' is not assignable to type 'ReactNode'.

Additional information

No response

Example

No response

[icyJoseph]

This looks like the error we were getting when Server Components where first introduced.

• https://nextjs.org/docs/app/api-reference/config/typescript#with-async-server-componens

Could you check that you have the correct TS version? Perhaps your IDE is running another TS version than the one included into your package.json?

[aleynaeser]

I have tried the suggestions provided here but couldn’t get them to work. Do you have a chance to test this on your side?

[icyJoseph]

If you have a repository, I'd check it ASAP

[icyJoseph]

Thinking out loud here, are your React and ReactDOM types floating dependencies? I wonder if by removing your node_modules/lock file whichever, you might have ended up taking a new minor/patch?

[Robert-Langbein]

received the same error after running a npm update. Any ideas how to fix? Also worked without any problems before.

[icyJoseph]

Got a repository to see?

[Robert-Langbein]

I have absolutely no idea why this happens. It works perfectly fine in a fresh Next.js project. I can implement an async server component just like this:
const ServerPage = () => { return ( <> <AsyncComponent /> </> ); };

However, in my actual project, I managed to get it working by making the primary server page itself async and awaiting the component:
const ServerPage = async () => { return ( <> {await AsyncComponent()} </> ); };

This feels more like a workaround, as my project is still a WIP, and I don't consider it a permanent solution. Maybe someone knows more about why this happens.

[icyJoseph]

Going back to Typescript 4.x is not great either... Are you able to take the react type dependencies I posted?

[aleynaeser]

@icyJoseph You mean with floating dependencies this, right? ^18

We fit package nextjs 14.2.6 https://github.com/vercel/next.js/blob/v14.2.6/package.json

[icyJoseph]

Nope, fix/pin it to those exact versions. Typescript you should be able to have any 5.x stable version

[aleynaeser]

Going back to Typescript 4.x is not great either... Are you able to take the react type dependencies I posted?

Okay, tomorrow i will try it. Do u have any idea for its reason? React 19 was released as stable. I got the error in the first build after the release.

[icyJoseph]

Ah I misread your comment...

Yeah remove the ^, to fix the type dependencies.

Well the types packages got also updated, as React 19 was released, including the React 18 types (there's a PR to revert some of that change set)

Since you did not have a fixed dependency, your app just picked up the latest types updates and broke.