honojs / hono

Web framework built on Web Standards
https://hono.dev
MIT License
20.34k stars 582 forks source link

JSX rendering returning `str.search is not a function` error #3544

Closed NuroDev closed 3 weeks ago

NuroDev commented 3 weeks ago

What version of Hono are you using?

4.6.5

What runtime/platform is your app running on?

Bun, Deno, Node.js

What steps can reproduce the bug?

Reproduction: dash.deno.com/playground/light-stoat-50

Or the code to run locally:

/** @jsx jsx */

import { Hono } from 'jsr:@hono/hono@4.6.5';
import { jsxRenderer } from 'jsr:@hono/hono@4.6.5/jsx-renderer';
import { jsx } from 'jsr:@hono/hono@4.6.5/jsx/dom';

const app = new Hono()
    .get(
        '/*',
        jsxRenderer(({ children }) => (
            <html>
                <body>
                    <header>Menu</header>
                    <div>{children}</div>
                </body>
            </html>
        )),
    )
    .get('/', (c) => c.render(<h1>Hello World</h1>))
    .get('/about', (c) => c.text('About me'));

Deno.serve(app.fetch);
deno -A ./main.tsx

What is the expected behavior?

Ideally it should render a web page using the provided JSX.

What do you see instead?

TypeError: str.search is not a function
    at escapeToBuffer (https://jsr.io/@hono/hono/4.6.5/src/utils/html.ts:91:21)
    at JSXFunctionNode.toStringToBuffer (https://jsr.io/@hono/hono/4.6.5/src/jsx/base.ts:281:7)
    at JSXFunctionNode.toString (https://jsr.io/@hono/hono/4.6.5/src/jsx/base.ts:159:12)
    at context (https://jsr.io/@hono/hono/4.6.5/src/jsx/context.ts:25:13)
    at JSXFunctionNode.toStringToBuffer (https://jsr.io/@hono/hono/4.6.5/src/jsx/base.ts:248:40)
    at JSXFunctionNode.toString (https://jsr.io/@hono/hono/4.6.5/src/jsx/base.ts:159:12)
    at html (https://jsr.io/@hono/hono/4.6.5/src/helper/html/index.ts:35:29)
    at Context.<anonymous> (https://jsr.io/@hono/hono/4.6.5/src/middleware/jsx-renderer/index.ts:53:22)
    at Context.render (https://jsr.io/@hono/hono/4.6.5/src/context.ts:514:26)
    at file:///src/main.tsx:19:21

Additional information

I primarily discovered this issue when trying to create a basic Deno Deploy project but testing the code on both Bun & Node.js I run into the same issue.

usualoma commented 3 weeks ago

Hi @NuroDev, Thank you for your report.

Please replace jsr:@hono/hono@4.6.5/jsx/dom with jsr:@hono/hono@4.6.5/jsx.

I apologize for the difficulty this causes on the Hono side, but jsr:@hono/hono@4.6.5/jsx/dom is a lightweight version specialized for cases where the DOM is handled in a web browser. jsr:@hono/hono@4.6.5/jsx must be used when generating strings on the server side.

NuroDev commented 3 weeks ago

Ah, my mistake. Yeah that seems to fix the issue, my bad 🤦

Thank you for the help @usualoma!