How Do I Properly Initialize RxDB in a Vue App with global

Question

I'm trying out RxDB for the first time in a Vue 3 app, and getting started is a bit more tricky than I expected (and it's probably my fault).

I installed RxDB with NPM in my project ("rxdb": "^9.20.0"), then I did this in my main.js file:

import { createRxDatabase, RxDatabase } from 'rxdb'
 
const db = await createRxDatabase({
  name: 'MyApp', adapter: 'idb'
})

console.dir(db)

I then get this error:

Uncaught ReferenceError: global is not defined

So I check the docs and found this that I need a global polyfill like this:

(window as any).global = window;
(window as any).process = {
    env: { DEBUG: undefined },
};

That looks to be an example using Typescript from Angular. When I try it in Vue, I then get this error:

Invalid assignment target
3  |  import { createRxDatabase, RxDatabase } from 'rxdb'
4  |  
5  |  const db = await createRxDatabase({
   |             ^
6  |    name: 'Avid', adapter: 'idb'
7  |  })

10 minutes in and I'm already a mess. 😅 Can someone show me how to properly start up RxDB in a Vue app?

Answer 1

You can't use await in root. It must be inside async function.

let db

async function initDb() {
  db = await createRxDatabase(...)
}

initDb()