PouchDB and SvelteKit

Question

I want to use PouchDB with SvelteKit. I have copied pouchdb-7.2.1.js to /src/libd in SvelteKit and renamed it to pouchdb.js. Pouchdb should run in the browser. Therefore I have used ssr=false to suppress server side rendering. I get the first error at the import statement. This is my first very short page (couchdb.svelte):

<script context="module">
    export const ssr = false;
</script>

<script>
    import PouchDB from '$lib/pouchdb.js'; 
</script>

I get an error 500

import not found: PouchDB

I have tried a lot of diffent version without any success. For example:

import PouchDB from 'pouchdb-browser';  (After npm i pouchdb-browser)
import PouchDB from 'pouchdb';          (After npm i pouchdb)

What is the correct way to use pouchdb?

Renaming pouchDB sounds like a bad idea. Check out this ultra simple app, github.com/neighbourhoodie/svelte-pouchdb-couchdb - maybe an epiphany will dawn. — RamblinRose
I have renamed the file from pouchdeb-7.2.1.js to pouchdb.js. I don't think that makes a difference. — Martin Weissenboeck
Unfortunately the hint did not bring any enlightenment. As I have written, the problem occurs already with a one-line-page. All lines return error messages. And I have tried many more variants: import PouchDB from '$lib/pouchdb.js'; import PouchDB from 'pouchdb-browser'; import PouchDB from 'pouchdb'; — Martin Weissenboeck
I spun up the canned sveltekit app and then I did npm i pouchdb-browser, npm i pouch-adapter-memory, and just used e.g. import PouchDB from "pouchdb-browser". Looked ok but am getting the dreaded "global is not defined". Likely related to some global/globalThis madness (I am not familiar with svelte). I should think npm should just work. — RamblinRose
Yes, I also got this error message when I tried. Maybe someone with detailed knowledge of SvelteKit and PouchDB could take a look. — Martin Weissenboeck

Leftium Leftium · Accepted Answer · 2021-04-26T23:46:55

Here is a work-around that uses PouchDB via a script tag:

index.svelte:

<script>
    import { onMount } from 'svelte'

    // Ensure execution only on the browser, after the pouchdb script has loaded.
    onMount(async function() {
        var db = new PouchDB('my_database');
        console.log({PouchDB})
        console.log({db})
    });
</script>


<svelte:head>
    <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/pouchdb.min.js"></script>
</svelte:head>

When imported, PouchDB seems to expect a certain environment that Svelte/Vite/Rollup does not provide. (Svelte/Vite is happiest with proper ESM modules; PouchDB seems to be a "window.global" script that was converted to a JS module.)

There may be a way to modify the configuration to create the environment expected by PouchDB. I think you would have to modify the svelte.config.cjs file. (Specifically the vite section that determines the rollup configuration.)

You might find some hints in this related issue for PouchDB + Angular.

I would just use the <script> work-around above.

PouchDB and SvelteKit

1 Answers