bug (ui): Type 'Element' is not assignable to type 'Child'

[colinnielsen]

Describe the bug

What: I get a JSX type errors when nesting Frog UI elements. When: using Frog + Next js

package.json

  "dependencies": {
    "frog": "latest",
    "hono": "^4",
    "react": "^18",
    "react-dom": "^18",
    "next": "14.1.0"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "vercel": "^32.4.1"
  }

Link to Minimal Reproducible Example

https://github.com/colinnielsen/frog-type-error

Steps To Reproduce

1. git clone https://github.com/colinnielsen/frog-type-error.git
2. cd frog-type-error
3. npm i
4. code .
5. hover app/api/[[...routes]]/route.tsx

Frog Version

0.8.0

TypeScript Version

5.4.2

Check existing issues

• [X] I checked there isn't already an issue for the bug I encountered.

Anything else?

No response

[tmm]

Upstream issue https://github.com/honojs/hono/issues/2232

We might be able to chuck in the additional types, like Element | ReactElement | ... or add a way to invert control (declaration merging Register pattern) as a workaround.

[tmm]

Linking up previous conversation about this from Discord too

https://discord.com/channels/1156791276818157609/1212219334370529370/1213172973226430474

[colinnielsen]

Here's my current fix for this: PR coming for the docs:

1. Install the patch-package as a dependency (NOTE: yarnv2 and pnpm have built-in support for patch-package)
2. Open node_modules/hono/dist/types/jsx/base.d.ts
3. Update the Child definition to include React.ReactNode

   - export type Child = string | Promise<string> | number | JSXNode | null | undefined | boolean | Child[];
   + export type Child = string | Promise<string> | number | JSXNode | null | undefined | boolean | Child[] | React.ReactNode;

4. run pnpm patch hono | yarn patch-package hono
5. add the patch as a postinstall script in your package.json

   "scripts": {
   "postinstall": "patch-package"
   }

[alongcamewayne]

I'm still running into this issue on frog 0.8.1 and hono 4.2.3 with Next.js. @colinnielsen's solution is working for me though.

[nakedfool]

I'm still running into this issue on frog 0.8.1 and hono 4.2.3 with Next.js. @colinnielsen's solution is working for me though.

+1