D
Deno

help

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

Ddidiercrunch9/19/2023
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 And this is the address to access it: https://good-hawk-21.deno.dev/ .
DAHDeno AI Helper9/19/2023
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! 🦕
Ddidiercrunch9/19/2023
Thanks alot @Deno AI Helper . It worked.
DAHDeno AI Helper9/19/2023
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! 🦕
DAHDeno AI Helper9/19/2023
🦕💚 I'm glad I was able to help!

Looking for more? Join the community!

Recommended Posts
node cryptoHey everyone, can you explain why certain packages such as node/crypto are not included in newer verPretty new to Deno, what is the recommended way to create a monorepo-like in Deno ?Everything is in the question. I tried during the entire week-end to get up & running with monorepo-[fresh] injecting css into head in a componentWhen I inject css in the head of my html in a component, it works perfectly, but when I reuse the coAutosave firing on editing `.ts` files when a separate Deno enabled project is openHello, I am working on slack automation using deno. I'm developing with webstorm, but I'm having a pProblem with parsing `base64url` from a `Buffer (node)`help , it works in bun but not in Deno, I don't know if is a bug from them or it's not implemented hUUID of managed KV databaseHello, I am trying to follow [this doc](https://docs.deno.com/kv/manual/on_deploy#connect-to-managedError at the execution of a programmHey ! I have a problem when i run one of my programm with deno, is a programm made with typescript Can't import typescript moduleWhy can I only import the js file and not the ts file? ```js import * as zip from "https://deno.lanIs there a way to change the default Details of the compiled exeI esentialy want to change the comiling defaults of the details and the image of the resulting exe (Setting source map root with `deno_emit`Hello! I'm currently trying to use `deno_emit` so bundle some assets. The code bundles properly, howIn Deno, what is the best way to simply host static websites?What is the best way to simply host static/cached files? Without having to do a read file call everyzsh: command not found: deno on macOSplease send help