didiercrunch•11mo ago

Basic react server side rendering does not work on Deno Deploy but does locally

The below application work correctly locally but fails on Deno Deploy. On Deno Deploy, all my responses have a status 500 and logs show an error ReferenceError: h is not defined at handler (file:///src/server.tsx:8:33).

import React from "https://esm.sh/react@18.2.0";

// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://esm.sh/react-dom@18.2.0/server";


const handler = (request: Request): Response => {
    const body = ReactDOMServer.renderToStaticMarkup(
        <div >hello world</div>
    );
    return new Response(body, {status: 200});
};

Deno.serve(handler);

import React from "https://esm.sh/react@18.2.0";

// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://esm.sh/react-dom@18.2.0/server";


const handler = (request: Request): Response => {
    const body = ReactDOMServer.renderToStaticMarkup(
        <div >hello world</div>
    );
    return new Response(body, {status: 200});
};

Deno.serve(handler);

I am sure that I am doing something stupid but I cannot figure out what. Can you help me spot it. cheers, didier

5 Replies

didiercrunch•11mo ago

And this is the address to access it: https://good-hawk-21.deno.dev/ .

Deno AI Helper•11mo ago

Hello Didier, The error message ReferenceError: h is not defined suggests that the JSX transformer is not able to find the function h which is used to create elements in JSX. In React, this function is usually React.createElement, but in Preact and some other libraries, it's often named h. In your code, you're using React, but you haven't specified a JSX transformer. This can be done using a special comment at the top of your file, like this:

/** @jsxImportSource https://esm.sh/react */

/** @jsxImportSource https://esm.sh/react */

This tells Deno to use the specified module (https://esm.sh/react in this case) as the source for the JSX transformer. However, Deno Deploy currently does not support this pragma. As a workaround, you can manually call React.createElement for your components. Here's how you can modify your code:

import React from "https://esm.sh/react@18.2.0";

// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://esm.sh/react-dom@18.2.0/server";

const handler = (request: Request): Response => {
    const body = ReactDOMServer.renderToStaticMarkup(
        React.createElement("div", null, "hello world")
    );
    return new Response(body, {status: 200});
};

Deno.serve(handler);

import React from "https://esm.sh/react@18.2.0";

// @deno-types="https://denopkg.com/soremwar/deno_types/react-dom/v16.13.1/server.d.ts"
import ReactDOMServer from "https://esm.sh/react-dom@18.2.0/server";

const handler = (request: Request): Response => {
    const body = ReactDOMServer.renderToStaticMarkup(
        React.createElement("div", null, "hello world")
    );
    return new Response(body, {status: 200});
};

Deno.serve(handler);

This should resolve the ReferenceError: h is not defined error. Let me know if you have any other questions! 🦕

Helpful Links: Examples | Deno Fresh 1.2 – welcoming a full-time maintainer, sharing state between islands, limited npm support, and more Node.js Compatibility | Deploy Docs HTTP Server: Hello World - Deno by Example

didiercrunch•11mo ago

Thanks alot @Deno AI Helper . It worked.

Deno AI Helper•11mo ago

You're welcome, Didier! I'm glad to hear that it worked. If you have any more questions or run into any other issues, feel free to ask. Happy coding! 🦕

Deno AI Helper•11mo ago

🦕💚 I'm glad I was able to help!