honojs / honox

HonoX - Hono based meta framework
https://hono.dev
MIT License
1.65k stars 43 forks source link

Type Error Occurs When Trying to Use React with createClient #87

Open p-chan opened 8 months ago

p-chan commented 8 months ago

What version of HonoX are you using?

0.1.4

What steps can reproduce the bug?

I attempted to set up the React renderer as described in the README, but encountered a type error.

Write ./app/client.ts.

import { createClient } from "honox/client";

createClient({
  hydrate: async (elem, root) => {
    const { hydrateRoot } = await import("react-dom/client");
    hydrateRoot(root, elem);
  },
  createElement: async (type: any, props: any) => {
    const { createElement } = await import("react");
    return createElement(type, props);
  },
});

Type Error Occurs.

Screenshot 2024-02-23 at 6 50 34

1. For the part hydrateRoot(root, elem);

Argument of type 'Node' is not assignable to parameter of type 'ReactNode'.

2. For the part createElement

Type '(type: any, props: any) => Promise<React.CElement<any, React.Component<any, any, any>>>' is not assignable to type 'CreateElement'.
  Type 'Promise<CElement<any, Component<any, any, any>>>' is not assignable to type 'Node | Promise<Node>'.
    Type 'Promise<CElement<any, Component<any, any, any>>>' is not assignable to type 'Promise<Node>'.
      Type 'ComponentElement<any, Component<any, any, any>>' is missing the following properties from type 'Node': baseURI, childNodes, firstChild, isConnected, and 46 more.

What is the expected behavior?

I expect that no type errors will occur.

What do you see instead?

No response

Additional information

It seems the same issue occurs at https://github.com/yusukebe/honox-playground/tree/main/projects/react. If necessary, I can create a minimal sandbox to reproduce the issue.

yusukebe commented 8 months ago

Hi @p-chan

This is a known issue. So you don't have to create a project to reproduce! We can handle this later. Thanks!