hermes-config/skills/self-hosting/shop-pro-quote/references/vite-dev-pb-sdk-import-bug.md

Vite Dev Server — PocketBase SDK Syntax Error

Symptom

pocketbase.es.mjs:1 Uncaught SyntaxError: Unexpected token '('

Or with pre-bundling:

pocketbase.js:878 Uncaught SyntaxError: Unexpected token '(' (at pocketbase.js:878:34)

Line 878 is async import(e, t = !1, s) { — the import keyword used as a method name.

Root Cause

PocketBase JS SDK v0.27.0 uses import as a method name in CollectionService.import(). Both:

1. Vite's esbuild pre-bundler keeps import as-is in the bundled node_modules/.vite/deps/pocketbase.js
2. The browser's module parser sees import( in the raw ESM file and treats it as a dynamic import

Fix

1. Patch the source file:

sed -i 's/async import(/async _import(/g' node_modules/pocketbase/dist/pocketbase.es.mjs

2. Exclude from Vite pre-bundling:

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    exclude: ['pocketbase'],
  },
  // ...
});

3. Clear Vite cache and restart:

rm -rf node_modules/.vite
npx vite --host 0.0.0.0 --port 5173

Vite Proxy for PocketBase

The Vite dev proxy to PocketBase needs explicit rewrite:

server: {
  proxy: {
    '/pb': {
      target: 'http://127.0.0.1:8091',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/pb/, ''),
    },
  },
}

Without rewrite, the proxy may forward /pb/api/health instead of /api/health to PocketBase, causing HTML responses instead of JSON.