bug: conflicting JSX types when using Hono JSX in a React project.

[jxom]

It seems when using Hono JSX in an existing React project (ie. Next.js project). The registered Hono JSX types seem to conflict with the registered React JSX types. Related to https://github.com/honojs/hono/issues/2190.

Here is a sample error (taken from the minimal reproducible repo below):

app/api/[[...route]]/route.tsx:12:17 - error TS2769: No overload matches this call.
  Overload 1 of 2, '(html: string | Promise<string>, status?: StatusCode | undefined, headers?: HeaderRecord | undefined): Response | Promise<Response>', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'string | Promise<string>'.
  Overload 2 of 2, '(html: string | Promise<string>, init?: ResponseInit | undefined): Response | Promise<Response>', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'string | Promise<string>'.

12   return c.html(<div>hello world</div>)
                   ~~~~~~~~~~~~~~~~~~~~~~

What version of Hono are you using?

4.0.3

What runtime/platform is your app running on?

N/A

What steps can reproduce the bug?

1. Clone this repo: https://github.com/jxom/hono-react-jsx-repro
2. bun install
3. bun run typecheck
4. Error will be shown.

What is the expected behavior?

No errors emitted.

What do you see instead?

No response

Additional information

No response

[Kuchasz]

I've got similar issues with a monorepo keeping hono and nextjs applications. No honojs examples from the webside was working without typescript yelling about some jsx errors. The work-around i've found was to specify all type definitions i want to use in tsconfig for a package with the honojs.

{
    "compilerOptions": {
        "types": ["hono"]
    }
}

[yusukebe]

Hi @jxom @Kuchasz

Hmm. This is not a bug, but rather a use that was not expected, but the following is a work-around.

app.get('/hello', (c) => {
  return c.html((<div>hello world</div>).toString())
})

I'll let you know if there's a better way to do it.

[flipvh]

We have similar TS conflicts as a result of using react-email in our project when trying hono 4. We will explore it further.

[Kuchasz]

Installed hono as peer dependency, seems that fixed my nextjs compilation errors.

{
  "peerDependencies": {
    "hono": "4.0.2"
  }
}

[dominictobias]

Still struggling with the same issue - as soon as you import something from the API project from the React project (in my case the API typings), it breaks all the JSX types for React. My issue is with @elysiajs/html -> @kitajs/html but the same issue applies. Still haven't found a solution that worked for me.

[patrik-u]

I've got similar issues with a monorepo keeping hono and nextjs applications. No honojs examples from the webside was working without typescript yelling about some jsx errors. The work-around i've found was to specify all type definitions i want to use in tsconfig for a package with the honojs.

{
    "compilerOptions": {
        "types": ["hono"]
    }
}

This did the trick for me, thank you.

[vickyRathee]

@flipvh Any success in using react-email? I also see TS errors and unable to run my project. If you are successful, can you please share the TS config? Or sample project.

[yusukebe]

This issue is solved with the latest version of Hono. Closing.