H
Hono•2w ago
Mosh Ontong

Hono React with bun

Error: 
Type '(props: Props) => boolean' is not assignable to type 'FC'.
  Type 'boolean' is not assignable to type 'HtmlEscapedString | Promise<HtmlEscapedString> | null'.ts(2322)
const Layout: FC
Type '(props: Props) => boolean' is not assignable to type 'FC'.
  Type 'boolean' is not assignable to type 'HtmlEscapedString | Promise<HtmlEscapedString> | null'.ts(2322)
const Layout: FC
Code: 
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import type { FC } from "hono/jsx";

const app = new Hono();

app.use(
  "/static/*",
  serveStatic({
    root: "./",
  })
);

app.get("/", (c) => c.text("Hello Bun!"));

const Layout: FC = (props) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  );
};

export default app;
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import type { FC } from "hono/jsx";

const app = new Hono();

app.use(
  "/static/*",
  serveStatic({
    root: "./",
  })
);

app.get("/", (c) => c.text("Hello Bun!"));

const Layout: FC = (props) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  );
};

export default app;
3 Replies
ambergristle
ambergristle•2w ago
hey! it's helpful to add syntax highlighting to code blocks by including the language name after the opening backticks: 
are you actually using react, or just hono jsx?
this is the base hono/jsx tsconfig:
are you actually using react, or just hono jsx?
this is the base hono/jsx tsconfig:
json { "compilerOptions": { "strict": true, "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } } 
using that, i'm not able to reproduce your issue, although if you're trying to use `Layout` with the `jsxRenderer` middleware, note that it actually expects an arg of type `ComponentWithChildren`
the error message you shared makes it seem like there is a component returning a boolean that is being passed to a function that expects `FC`
using that, i'm not able to reproduce your issue, although if you're trying to use `Layout` with the `jsxRenderer` middleware, note that it actually expects an arg of type `ComponentWithChildren`
the error message you shared makes it seem like there is a component returning a boolean that is being passed to a function that expects `FC`
Type '(props: Props) => boolean' is not assignable to type 'FC'. `` but none of the functions in your code snippet return a boolean, nor is any component being passed as an argument can you share the code where Layout` is actually being consumed?
Mosh Ontong
Mosh OntongOP•2w ago
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import type { FC } from "hono/jsx";

const app = new Hono();

app.use(
  "/static/*",
  serveStatic({
    root: "./",
  })
);

const Layout: FC = (props) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  );
};

const Top: FC<{ messages: string[] }> = (props: { messages: string[] }) => {
  return (
    <Layout>
      <h1>Hello Hono!</h1>
      <ul>
        {props.messages.map((message) => {
          return <li>{message}!!</li>;
        })}
      </ul>
    </Layout>
  );
};

app.get("/", (c) => {
  const messages = ["Good Morning", "Good Evening", "Good Night"];
  return c.html(<Top messages={messages} />);
});

export default app;
import { Hono } from "hono";
import { serveStatic } from "hono/bun";
import type { FC } from "hono/jsx";

const app = new Hono();

app.use(
  "/static/*",
  serveStatic({
    root: "./",
  })
);

const Layout: FC = (props) => {
  return (
    <html>
      <body>{props.children}</body>
    </html>
  );
};

const Top: FC<{ messages: string[] }> = (props: { messages: string[] }) => {
  return (
    <Layout>
      <h1>Hello Hono!</h1>
      <ul>
        {props.messages.map((message) => {
          return <li>{message}!!</li>;
        })}
      </ul>
    </Layout>
  );
};

app.get("/", (c) => {
  const messages = ["Good Morning", "Good Evening", "Good Night"];
  return c.html(<Top messages={messages} />);
});

export default app;
do I need to put into a tsx file?
ambergristle
ambergristle•2w ago
yeah. any file that has jsx/tsx needs a jsx/tsx extension

Did you find this page helpful?