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 mkdir -p dist
# Build JS bundle # Build JS bundle — preact must be bundled (no CDN/external loader)
${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 || \
${NPX:+$NPX} esbuild src/app.jsx \ ${NPX:+$NPX} esbuild src/app.jsx \
--bundle \ --bundle \
--minify \ --minify \
--format=esm \
--jsx-factory=h \ --jsx-factory=h \
--jsx-fragment=Fragment \ --jsx-fragment=Fragment \
--define:process.env.NODE_ENV=\"production\" \ --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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script src="/app.js"></script> <script type="module" src="/app.js"></script>
</body> </body>
</html> </html>

View File

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