honojs
`hono/client` is overriding React types in a Next.js project
What version of Hono are you using?
4.0.0
What runtime/platform is your app running on?
Node.js 20
What steps can reproduce the bug?
If we're on a Next.js 14.1 project and we're importing hono as a dependency to use the hono/client, we can't use the following code :
import type { ComponentProps, ElementType, PropsWithChildren, ReactNode } from "react";
type Props = Omit<ComponentProps<"div">, "className"> & {
as?: ElementType;
children: ReactNode;
};
export function Container({ className, children, as }: Props) {
const Tag = as || "div";
return (
<Tag>
{children}
</Tag>
);
}
Because the following lines are overriding the JSX.ElementType type https://github.com/honojs/hono/blob/ca6f36511094522b84b6575d99bde4728bcea87c/src/jsx/base.ts#L13C1-L24C2
What is the expected behavior?
We shouldn't have the following errors :
- JSX element type 'Tag' does not have any construct or call signatures. [2604]
- 'Tag' cannot be used as a JSX component. Its type 'React.ElementType' is not a valid JSX element type. Type 'number' is not assignable to type 'ElementType'. [2786]
What do you see instead?
No response
Additional information
No response
Hi @Yovach
How about putting the following line to the top of your file in the Next.js app?
/* @jsxImportSource react */
Hi,
I was not able to fix this issue by putting
/* @jsxImportSource react */
I still have Type error: JSX element type 'Tag' does not have any construct or call signatures..
I also tried with "jsx": "react-jsx" in tsconfig.json but Next.js reverts to "preserve"
@Yovach Could you share the minimal project to reproduce it?
Sure, i'll attach a reproduction this weekend.
Hi @yusukebe, Sorry for the long delay.
Here is a reproduction https://codesandbox.io/p/devbox/elegant-bogdan-ktsdc4
The error is in app/component/container.tsx
Thanks! @Yovach
Hi @usualoma !
This error is caused by a conflict between React's JSX declaration and hono/jsx's JSX declaration. Is there any solution?
https://github.com/honojs/hono/blob/ca6f36511094522b84b6575d99bde4728bcea87c/src/jsx/base.ts#L13C1-L24C2
