# 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:**

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

**2. Exclude from Vite pre-bundling:**

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

**3. Clear Vite cache and restart:**

```bash
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`:

```typescript
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.