electric-sql
useLiveQuery with pgvector issues
I have pglite with react hooks in browser context, using vite, like so:
"@electric-sql/pglite": "^0.3.11",
"@electric-sql/pglite-react": "^0.2.29",
"@electric-sql/pglite-sync": "^0.3.15",
i have it excluded from optimisation:
optimizeDeps: {
exclude: ['@electric-sql/pglite'],
},
I try to run any query with pgvector it fails. Example code is taken directly from the pgvector repo readme.md:
import { useLiveQuery, usePGlite } from "@electric-sql/pglite-react";
export default function VectorTest() {
console.log('starting vector test')
const db = usePGlite()
db.exec(`CREATE TABLE IF NOT EXISTS items (id bigserial PRIMARY KEY, embedding vector(3));`);
db.exec(`INSERT INTO items (embedding) VALUES ('[1,2,3]'), ('[4,5,6]');`)
const result = useLiveQuery(`SELECT * FROM items ORDER BY embedding <-> '[3,1,2]' LIMIT 5;`);
console.log('ending vector test with result:')
console.log(JSON.stringify(result));
return <p>{result}</p>
}
this is my db setup:
export const db = await PGlite.create({
debug: 4,
database: 'idb://meal_planner',
initialMemory: 64 * 1024 * 1024,
extensions: {
electric: electricSync(),
live,
vector,
pg_trgm,
},
})
and of course i have:
await db.exec('CREATE EXTENSION IF NOT EXISTS vector;')
running the same setup with the same queries in a docker postgres instance works through dBeaver.
Yet, in the browser, first run i just get the last log message:
runExec CREATE OR REPLACE TEMP VIEW live_query_64646cdf75b5406699aaa666d4d8af1f_view AS SELECT * FROM items ORDER BY embedding <-> '[3,1,2]' LIMIT 5
Then it freezes the browser tab (Arc) so bad, i cannot even close it, i have to close the entire browser. Upon reopening the brower and opening up the tab again the console writes:
runExec BEGIN undefined
runExec CREATE OR REPLACE TEMP VIEW live_query_64646cdf75b5406699aaa666d4d8af1f_view AS SELECT * FROM items ORDER BY embedding <-> '[3,1,2]' LIMIT 5; undefined
runExec ROLLBACK undefined
2025-10-26 06:41:31.683 GMT [0] ERROR: cannot drop active portal "" at character 9
2025-10-26 06:41:31.683 GMT [0] STATEMENT: ROLLBACK
runExec BEGIN undefined
2025-10-26 06:41:31.690 GMT [0] ERROR: current transaction is aborted, commands ignored until end of transaction block
2025-10-26 06:41:31.690 GMT [0] STATEMENT: BEGIN
Uncaught (in promise) error: current transaction is aborted, commands ignored until end of transaction block
runExec BEGIN undefined
2025-10-26 06:41:31.773 GMT [0] ERROR: current transaction is aborted, commands ignored until end of transaction block
2025-10-26 06:41:31.773 GMT [0] STATEMENT: BEGIN
Uncaught (in promise) error: current transaction is aborted, commands ignored until end of transaction block
And thats going on in a loop
with:
"@electric-sql/pglite": "0.3.8",
"@electric-sql/pglite-react": "0.2.26",
"@electric-sql/pglite-sync": "0.3.12",
it works, no other changes made
const result = useLiveQuery(
SELECT * FROM items ORDER BY embedding <-> '[3,1,2]' LIMIT 5;);
I guess the issue is with useLiveQuery possibly in combination with pgvector because we have CI tests for pgvector that run just fine.
