SkateSpots/vite.config.ts
shakespeare.diy 3a96184001 Fix native build: access Camera via runtime plugin, not @capacitor/camera import
Local CAPACITOR_BUILD failed: Rollup couldn't resolve import
"@capacitor/camera" from CameraCapture.tsx — the package is listed in
package.json but isn't present in node_modules on the build machine.

Root pattern (same class as the @capacitor/core crash): a package that
must NOT be resolved at build time was being imported by specifier.

Fix:
- CameraCapture.tsx no longer imports '@capacitor/camera' at all. The
  Camera plugin is accessed via the runtime-injected
  window.Capacitor.Plugins.Camera (Capacitor injects it natively), using
  string enum values ('dataUrl' / 'CAMERA'). No bare specifier remains in
  the bundle, and it degrades gracefully if the plugin is absent.
- vite.config: @capacitor/camera moved back to `external` (belt-and-braces;
  it's no longer imported anyway). @capacitor/core stays BUNDLED (static
  import in platform.ts — the white-screen fix). nostr-signer-capacitor-plugin
  and the 4 uninstalled @capacitor/* plugins remain external.

Verified: no @capacitor/camera specifier and no unresolved @capacitor/core
import in the built bundle; no static imports of any externalized package
remain in src/. Bump to 1.0.67.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
2026-07-24 18:40:19 +07:00

123 lines
4.5 KiB
TypeScript

import path from "node:path";
import react from "@vitejs/plugin-react-swc";
import { defineConfig } from "vitest/config";
// https://vitejs.dev/config/
export default defineConfig(() => ({
// In a native Capacitor WebView the bundle is served from the local
// filesystem, so assets must be referenced with RELATIVE paths ('./…').
// Absolute '/…' paths are the classic cause of a white screen on device.
// The regular web deploy keeps '/' (served from a domain root).
base: process.env.CAPACITOR_BUILD ? './' : '/',
server: {
host: "::",
port: 8080,
},
plugins: [
react(),
],
test: {
globals: true,
environment: 'jsdom',
setupFiles: './src/test/setup.ts',
onConsoleLog(log) {
return !log.includes("React Router Future Flag Warning");
},
env: {
DEBUG_PRINT_LIMIT: '0',
},
},
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
optimizeDeps: {
exclude: ['@lightninglabs/lnc-web'],
},
build: {
// Strip console.log/warn/debug in production (keeps console.error for real errors)
minify: 'esbuild',
commonjsOptions: {
transformMixedEsModules: true,
},
rollupOptions: {
// Bundling policy — the distinction that matters is STATIC vs DYNAMIC import,
// and whether the package resolves on the build machine:
//
// BUNDLED (absent from this list):
// - @capacitor/core — imported STATICALLY (lib/platform.ts). It MUST be
// bundled: leaving it external emitted a bare `import "@capacitor/core"`
// specifier the native WebView can't resolve → white-screen boot crash.
// Capacitor guarantees core is installed, so bundling always resolves.
//
// EXTERNAL (listed below):
// - @capacitor/camera — used only via a GUARDED dynamic import() on native
// (components/CameraCapture.tsx). It may not be installed on every build
// machine, and it's optional/native-only, so it must stay external. The
// dynamic import() remains a runtime call that degrades gracefully.
// - nostr-signer-capacitor-plugin — installed from GitHub with a broken
// package entry point; cannot be bundled. Guarded dynamic import() only.
// - @capacitor/app|haptics|keyboard|status-bar — NOT installed and never
// statically imported (accessed via window.Capacitor.Plugins at runtime).
external: [
'@capacitor/camera',
'nostr-signer-capacitor-plugin',
'@capacitor/app',
'@capacitor/haptics',
'@capacitor/keyboard',
'@capacitor/status-bar',
],
output: process.env.CAPACITOR_BUILD ? {
// Single bundle for Capacitor APK — avoids 100+ chunk file requests
// that fail silently in Android WebView local file serving
manualChunks: undefined,
inlineDynamicImports: true,
} : {
// Split large vendor libraries into separate cacheable chunks.
// Users only re-download a chunk when that specific library updates.
manualChunks(id) {
// Map — Leaflet is large (~150KB), isolate it so non-map pages don't pay for it
if (id.includes('leaflet') || id.includes('ngeohash')) {
return 'vendor-map';
}
// Nostr core — changes infrequently, worth caching separately
if (id.includes('nostr-tools') || id.includes('@nostrify') || id.includes('@noble')) {
return 'vendor-nostr';
}
// Bitcoin / Lightning — large, rarely changes
if (
id.includes('@cashu') ||
id.includes('bitcoinjs-lib') ||
id.includes('@scure') ||
id.includes('@bitcoinerlab') ||
id.includes('ecpair') ||
id.includes('@getalby') ||
id.includes('npubcash')
) {
return 'vendor-bitcoin';
}
// React ecosystem — very stable, long cache life
if (id.includes('react-dom') || id.includes('react-router')) {
return 'vendor-react';
}
// Radix UI components — large but stable
if (id.includes('@radix-ui')) {
return 'vendor-radix';
}
// TanStack Query
if (id.includes('@tanstack')) {
return 'vendor-query';
}
},
},
},
},
// Strip console.log/warn/debug calls from production build
esbuild: {
drop: ['debugger'],
pure: ['console.log', 'console.warn', 'console.debug'],
},
}));