React hooks are undefined when using react ( esm.sh ) + deno

[azure ledge]

I'm very new to deno and quite enjoy it's advantages over node. I'm trying to set up react ssr with deno but am encountering the following error. ( image one )

This is my router with oak ( within file named index.tsx )

router
  .get("/", async (ctx) => {
    const html = await renderToString(<Display />);
    ctx.response.type = "text/html";
    ctx.response.body = html;
  })

and this is my display,tsx

import React, { useState } from "https://esm.sh/react@18.2.0"

export default function Display() {
  let [ count, setCount ] = useState(0);
  return (
    <>
      <h1>Welcome to my app!</h1>
      <button onClick={() => setCount(count + 1)}>Count: { count }</button>
    </>
  )
}

I've had this error for quite some time and it has increasingly become a roadblock to set up react ssr with deno.

Any help or discussion would be greatly appreciated.

[mint stag]

I've been able to get react hooks to work with Deno using esm.sh.
I've been working on making a react framework for deno. You don't need to use my framework, you could just copy the import_map.json, deno.jsonc, and .vscode/settings.json to help get your project started.

https://github.com/udibo/react_app_example

[azure ledge]

woah, this framework really is nice, I've been trying to create my own framework for quite some time, but haven't been able to get a solid reference on how to go about it. Could you brief me about how you went about making this?

[mint stag]

I basically first played around with getting react with SSR to work with deno. Then after seeing other react frameworks like nextjs, remix, and fresh, I thought it would be useful to have something like that for Deno but for react instead of preact. Then I thought of ways I could generalize my implementation for use in other projects.

[azure ledge]

I'm trying to get react ssr to work, but the hooks don't work at all

[mint stag]

I just read the manual on how to get react/preact to work with deno to figure out the deno.jsonc configuration. Then import map is just esm modules needed pinned to the latest version of react.

[azure ledge]

plus, how do you hydrate roots in deno?

[mint stag]

I'm going to keep working on improving the framework I made. I plan on creating more issues this weekend for ways I could improve it. Like making a plugin system to make it easier to get started using other frameworks like twind and react query.

This weekend I'm going to post an example of how to use react query in it.

I will probably need to work on improving the documentation on how to use it. The basic idea is that components and api routes are stored in the routes directory

I mainly wanted to get it out so that I can see if it's something people would be interested in and to get feedback on how I could improve it. I plan on using it in my own deno projects.

[azure ledge]

I've got the error out for hooks, but now the hooks just don't work. For instance, useState does not update the elements...quite the intriguing error.

[mint stag]

I haven't had any problems with hooks not working. They work right for me.

[azure ledge]

when the button is clicked, the count within the button does not change

[mint stag]

If you are using my framework, you would want to import from npm/react instead of from that esm.sh url. The import map makes it so that you will use the same version of react as the framework does.

[azure ledge]

No, I'm rendering it with oak and deno, I haven't tried your framework yet, will look into it soon though

[mint stag]

I don't have any idea for what could be wrong with your implementation. I just know I was able to get hooks to work, so it is possible.

[azure ledge]

this is my get handler in oak, does renderToString not provide javascript along with the static html?

[mint stag]

I think it might be that you're not hydrating your app on the client side. It needs to be hydrated for the javascript to work on the client side.

[azure ledge]

How would I go about doing that

[mint stag]

If you look at my mod.tsx file, the hydrate function I have will use react's hydrateRoot function to hydrate the application on the client side. Then if you look at my renderToReadableStream function, you can see how I add the rendered react component between the start and end text returned by my html function. The head has a script tag referencing the file that has the hydration code so that when the browser loads the page, it will call it to make the app interactive in the browser.

[mint stag]

Over time, I'll try building up documentation on how to do various things with my framework but I'm a solo dev doing this on the side, so it might take a while before the documentation is good.