honojs
c.render with jsxRenderer has type errors for 2 arguments
What version of Hono are you using?
4.2.7
What runtime/platform is your app running on?
Workers
What steps can reproduce the bug?
export const Layout: FC = ({ children, c, title }) => { app.get("*", jsxRenderer(Layout)); return c.render(index(c), { c, title: "Home", search: true }); Expected 1 arguments, but got 2
What is the expected behavior?
No response
What do you see instead?
No response
Additional information
No response
Argument of type '({ children, title }: PropsWithChildren<{ Layout: FC; }>) => string' is not assignable to parameter of type 'ComponentWithChildren'. Type 'string' is not assignable to type 'HtmlEscapedString | Promise<HtmlEscapedString>'
If just using the example from hono docs
Also what exactly is suppose to be the type of layout component that isn't defined inline?
@janat08
Thanks! Please add the following to src/index.ts or global.d.ts.
declare module 'hono' {
interface ContextRenderer {
(content: string | Promise<string>, props: { title: string }): Response
}
}
@janat08
How about using PropsWithChildren?
import type { PropsWithChildren } from 'hono/jsx'
export const Layout = ({ children, title }: PropsWithChildren<{ title: string }>) => {
return (
<html>
<head>
<meta charset="utf-8" />
<link rel="manifest" href="/static/manifest.json" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
</head>
<body>
<main class="responsive" role="main">
{children}
</main>
</body>
</html>
)
}
@janat08
I can't understand where the error occurs. Could you provide a minimal project to reproduce it again?
@janat08 Thanks!
Try to use this code:
import { Hono } from 'hono'
import { jsxRenderer } from 'hono/jsx-renderer'
import { Layout } from './layoutBeercss'
const app = new Hono()
app.get('*', jsxRenderer(Layout))
declare module 'hono' {
interface ContextRenderer {
(content: string | Promise<string>, props: { title: string }): Response
}
}
// ...