Next.js Discord

Discord Forum

'Navbar' cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX

Unanswered
Spectacled Caiman posted this in #help-forum
Open in Discord
Spectacled CaimanOP
I have a navbar server component. When I use inside another server component I get this error:

'Navbar' 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


Code for navbar: https://srcb.in/EizIWMlLo7
Code for dashboard layout: https://sourceb.in/3qF8H90Kff

---

I've been using the same code since v13 and I did not have a problem with it until now.
The Dashboard Layout component wraps around the other codes which might be server component or client components.

23 Replies

Shy Albatross
show code for Navbar nevermind, there's a link
Shy Albatross
it's a longshot, but maybe it doesn't like that you're returning the redirect
I tied bu can't reproduce the issue locally
the return type should be Promise<JSX.Element>, I don't know where he gets the Element type from
Pixiebob
Don't return redirect just redirect. You cant return anything other than a jsx element in order for it to be considered a component
Shy Albatross
yeah but I did the same (returning a redirect) and it didn't complain
Pixiebob
It might be something with strict mode being enabled in ts then? I'm not sure.

But op should still just redirect you can return null after the redirect if you want
Or you could set up middleware to handle this
@Pixiebob Don't return redirect just redirect. You cant return anything other than a jsx element in order for it to be considered a component
joulev
nothing wrong with this. redirect throws an error so returning it is fine
function foo(): number {
  return throw new Error(...);
}

typescript is happy with this
for the case of the OP idk though, typescript should support promise components for a while already
Shy Albatross
it does, I replicated OP's code and it worked fine for me, was showing the <Navbar /> as Promise<JSX.Element> in the layout and had no issues
tsconfig issue?
Spectacled CaimanOP
Idk, in development everything is fine. When I try to build it throws a build error then
I did everything that @Pixiebob said like just redirecting or returning null afterwards but nothing worked. Same ts error
@Shy Albatross tsconfig issue?
Spectacled CaimanOP
So yeah maybe
btw thank you both for responding :) 💙
Asiatic Lion
Did you try Promise<ReactNode> yet?
@Asiatic Lion Did you try `Promise<ReactNode>` yet?
Spectacled CaimanOP
No not yet
How would I go about doing that?
Spectacled CaimanOP
It's okay I just added a little @ts-ignore and it doesn't crash on build now
@Spectacled Caiman No not yet
Asiatic Lion
replace your Promise<Element> by Promise<ReactNode>
Spectacled CaimanOP
That's the thing. I never did that in my code. It's typescript. It's auto interpreting it. I did add a manually but I still got the same error.