How to use RxDB with PouchDB adapter in a Nuxt 3 project?

Question

I'm using Nuxt 3 with client side rendering and I'm having some issues making RxDB with PouchDB adapter to work.

I'm having issues getting RxDB/PouchDB to work. :/

Excerpt from nuxt.config.ts (I tried my best but I don't know what I'm doing.)

ssr: false,
build: {
    transpile: [
        'pouchdb-browser',
        'pouchdb-utils',
    ],
},

And the error: Uncaught SyntaxError: import not found: default

Coming from the url: http://127.0.0.1:3000/_nuxt/node_modules/pouchdb-errors/lib/index.es.js?v=408c3351

import inherits from '/_nuxt/node_modules/inherits/inherits_browser.js?v=408c3351';
inherits(PouchError, Error);
[...]

plugins/rxdb.ts

import { createRxDatabase, addRxPlugin } from 'rxdb';
import { getRxStoragePouch, addPouchPlugin } from 'rxdb/plugins/pouchdb';

addPouchPlugin(require('pouchdb-adapter-idb'));

export default defineNuxtPlugin(async nuxtApp => {

    const RxDB = await createRxDatabase({
        name: 'test',                       // <- name
        storage: getRxStoragePouch('idb'),  // <- RxStorage
        password: 'myPassword',             // <- password (optional)
        multiInstance: true,                // <- multiInstance (optional, default: true)
        eventReduce: true,                  // <- eventReduce (optional, default: true)
        cleanupPolicy: {}                   // <- custom cleanup policy (optional) 
    });

    return {
        provide: {
            rxdb: () => RxDB
        }
    }

})

package.json

  "dependencies": {
    "@pinia/nuxt": "^0.1.8",
    "@vueuse/nuxt": "^8.2.6",
    "@zxcvbn-ts/core": "^2.0.1",
    "@zxcvbn-ts/language-common": "^2.0.1",
    "@zxcvbn-ts/language-en": "^2.0.1",
    "@zxcvbn-ts/language-fr": "^2.0.1",
    "argon2": "^0.28.5",
    "dompurify": "^2.3.6",
    "nano": "^10.0.0",
    "nanoid": "^3.3.4",
    "paseto": "^3.1.0",
    "pouchdb": "^7.3.0",
    "pouchdb-adapter-http": "^7.3.0",
    "pouchdb-adapter-idb": "^7.3.0",
    "rxdb": "^12.4.3",
    "rxjs": "^7.5.5",
    "ts-node": "^10.8.0",
    "typescript": "^4.7.2",
  }

I saw a recommendation to add something along those lines:


    vite: {
        define: {
            "global": {},
        },
    }

But it changes the errors. Although nuxi dev throws the same error as above, nuxi build && nuxi preview doesn't build and complains about the global variable I set in the Vite configuration above.

 ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                              19:19:24
file: /media/hdd/projects/Nuxt3/client/node_modules/nuxt/dist/pages/runtime/router.mjs:69:4
67:   nuxtApp._activeRoute = reactive(activeRoute);
68:   nuxtApp._middleware = nuxtApp._middleware || {
69:     global: [],
        ^
70:     named: {}
71:   };

ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)

I tried adding pouchdb-errors to the build.transpile array, but sadly no changes client side, same error it seems. I know import doesn't work client-side, I simply don't understand which properties would need what kind of content to make this works inside nuxt.config.ts.

How to use RxDB with PouchDB adapter in a Nuxt 3 project?

0 Answers0