ioB•3mo ago

Help compiling preact

Here's my current setup:

// deno.json
{
  "imports": {
    "preact": "npm:preact@^10.25.4",
    "@preact/signals": "npm:@preact/signals@^2.0.1"
  }
}

// deno.json
{
  "imports": {
    "preact": "npm:preact@^10.25.4",
    "@preact/signals": "npm:@preact/signals@^2.0.1"
  }
}

// main.tsx
/** @jsx h */
import { render, h } from "preact";
import { useSignal } from "@preact/signals";

function Page() {
  const count = useSignal(0);

  return (
    <div>
      <button
        class="bg-blue-500 text-white hover:bg-blue-400 rounded"
        onClick={() => count.value++}
      >
        Click me! You've clicked me {count} times.
      </button>
    </div>
  );
}

render(<Page />, document.getElementById('app'))

// main.tsx
/** @jsx h */
import { render, h } from "preact";
import { useSignal } from "@preact/signals";

function Page() {
  const count = useSignal(0);

  return (
    <div>
      <button
        class="bg-blue-500 text-white hover:bg-blue-400 rounded"
        onClick={() => count.value++}
      >
        Click me! You've clicked me {count} times.
      </button>
    </div>
  );
}

render(<Page />, document.getElementById('app'))

I'm compiling it using esbuild as follows:

export async function buildClient(entrypoints: string[]) {
  const result = await esbuild.build({
    plugins: [...denoPlugins({
      configPath: join(Deno.cwd(), "deno.json"),
    })],
    entryPoints: entrypoints,
    bundle: true,
    write: false,
    format: "esm",
  });  
  esbuild.stop(); 
  return result.outputFiles;
}
buildClient(["./main.tsx"]);

export async function buildClient(entrypoints: string[]) {
  const result = await esbuild.build({
    plugins: [...denoPlugins({
      configPath: join(Deno.cwd(), "deno.json"),
    })],
    entryPoints: entrypoints,
    bundle: true,
    write: false,
    format: "esm",
  });  
  esbuild.stop(); 
  return result.outputFiles;
}
buildClient(["./main.tsx"]);

This ultimately gets compiled down to the file that I've attached. Unfortunately, when I actually try to run the code I get the error message I've attached. Any ideas?

message.txt

10 Replies

ioBOP•3mo ago

test html page for fun:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script src="./out.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script src="./out.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

cc @marvinh. if you could give some guidance when you get the chance

CodyC•3mo ago

I see write: false -- is that script not writing files, and you're still running an old version?

ioBOP•3mo ago

I write to the filesystem outside of the included reproduction

CodyC•3mo ago

Weird. I use esbuild (indirectly) to compile and embed preact code and haven’t run into this problem.

ioBOP•3mo ago

would love to see your setup

CodyC•3mo ago

https://github.com/diskuto/diskuto-web/blob/main/embedder.ts It’s a bit indirect. It’s using deno-embedder to embed files. But internally that uses esbuild.

kt3k•3mo ago

I think you need to load your script with type="module" instead of type="text/javascript" because the output format is in ESM. I was able to run the example above with:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script src="./out.js" type="module"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script src="./out.js" type="module"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

kt3k•3mo ago

You also need to run some local server to avoid security error in browser

ioBOP•3mo ago

🙏 Thanks! I should have tried that earlier

Help compiling preact

Did you find this page helpful?