Error when using React hooks with JSX plugin

[JanKaul]

Expected behavior

Being able to use React hooks in React components for creating a static site with Lume.

Component:

export function Index() {
    let [message, setMessage] = React.useState("Hello World");
    <>
      <h1>{message}</h1>
    </>
};

Config:

import lume from "lume/mod.ts";
import jsx from "lume/plugins/jsx.ts";

const site = lume();

site.ignore("src");

site.use(jsx());

export default site;

Actual behavior

Error when running lume build task:

Error: Error rendering this page
Caused by TypeError: Cannot read properties of null (reading 'useState')

Steps to reproduce

Clone https://github.com/JanKaul/test-lume-react and run deno task build

[oscarotero]

It looks like some React internals doesn't work in this way. This works fine:

change index.tsx to this:

import { Index } from "./src/components/index.tsx";

export default function () {
  return <Index />
}

The index component doesn't return anything. You need to add a return.

[oscarotero]

alternatively, you can create Lume components:

• Store your component in _components/index.tsx and export it as default.
• In your pages, you have the comp variable with all components found:

  export default function ({ comp }) {
  return <comp.Index />
  }

[JanKaul]

It looks like some React internals doesn't work in this way. This works fine:

change index.tsx to this:

import { Index } from "./src/components/index.tsx";

export default function () {
  return <Index />
}

The index component doesn't return anything. You need to add a return.

Ah great. That fixed the issue. Thank you. The return somehow got lost when I tried to make a small example.