Fix SPA: bundle preact instead of leaving as external require (closes #48) (#49)
All checks were successful
check / check (push) Successful in 5s

## Problem

The SPA fails to load with:
```
Uncaught Error: Dynamic require of "preact" is not supported
```

The esbuild config in `web/build.sh` had `--external:preact`, which tells the bundler to leave preact as a `require()` call instead of including it in the bundle. Since the browser has no `require()` function and there is no CDN/import-map loading preact externally, the app crashes immediately.

## Fix

- Remove `--external:preact` from `build.sh` so preact is bundled into `app.js`
- Add `--format=esm` to output proper ESM instead of IIFE with CJS require shims
- Update `index.html` to use `<script type="module">` for ESM compatibility
- Remove the dead fallback build command (was never reached since the first command succeeded)
- Rebuild `dist/app.js` with preact properly inlined (21.1KB minified)

closes #48

Reviewed-on: #49
Co-authored-by: clawbot <clawbot@noreply.example.org>
Co-committed-by: clawbot <clawbot@noreply.example.org>
This commit was merged in pull request #49.
This commit is contained in:
2026-03-07 14:53:13 +01:00
committed by Jeffrey Paul
parent 2da7f11484
commit c0e344d6fc
4 changed files with 6 additions and 14 deletions

View File

@@ -16,19 +16,11 @@ fi
mkdir -p dist
# Build JS bundle
${NPX:+$NPX} esbuild src/app.jsx \
--bundle \
--minify \
--jsx-factory=h \
--jsx-fragment=Fragment \
--define:process.env.NODE_ENV=\"production\" \
--external:preact \
--outfile=dist/app.js \
2>/dev/null || \
# Build JS bundle — preact must be bundled (no CDN/external loader)
${NPX:+$NPX} esbuild src/app.jsx \
--bundle \
--minify \
--format=esm \
--jsx-factory=h \
--jsx-fragment=Fragment \
--define:process.env.NODE_ENV=\"production\" \

4
web/dist/app.js vendored

File diff suppressed because one or more lines are too long

2
web/dist/index.html vendored
View File

@@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script src="/app.js"></script>
<script type="module" src="/app.js"></script>
</body>
</html>

View File

@@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script src="/app.js"></script>
<script type="module" src="/app.js"></script>
</body>
</html>