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?

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?

• javascript
• couchdb
• svelte
• sveltekit
• pouchdb

• Renaming pouchDB sounds like a bad idea. Check out this ultra simple app, github./neighbourhoodie/svelte-pouchdb-couchdb - maybe an epiphany will dawn. – RamblinRose Commented Apr 26, 2021 at 13:02
• I have renamed the file from pouchdeb-7.2.1.js to pouchdb.js. I don't think that makes a difference. – Martin Weissenboeck Commented Apr 26, 2021 at 14:06
• 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 Commented Apr 26, 2021 at 18:47
• 1 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 Commented Apr 26, 2021 at 18:57
• 1 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 Commented Apr 27, 2021 at 6:13

3 Answers 3

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/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.

For future googlers trying to integrate pouchdb-browser and/or RxDB with sveltekit here are the changes to "fix" the enviornment for pouchdb in the browser when using vite.

1. Add to your <head> section before %svelte.head%

<script>
    window.process = window.process || {env: {NODE_DEBUG:undefined, DEBUG:undefined}};
    window.global = window;
</script>

2. In svelte.config.js add the optimizeDeps to config.kit.vite.optimizeDeps

optimizeDeps: {
    allowNodeBuiltins: ['pouchdb-browser', 'pouchdb-utils', 'base64id', 'mime-types']
}

Here is a mit that makes these changes to my app: https://github./TechplexEngineer/bionic-scouting/mit/d1c4a4dcdc7096ae40937501d97a7ef9ee10ab66

Thanks to: pouchdb/pouchdb#8266 (ment)

I have been battling this very same problem for a while. I decided to go a different route. This may not be right, but it is working.

I added two scripts to my app.html head:

<head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="%svelte.assets%/favicon.png" />
    <meta name="viewport" content="width=device-width, initial- 
    scale=1" />
    <!-- Call the Pouchdb import -->
    <script type="text/javascript" src="../src/lib/pouchdb.js">
    </script>
    <!-- create new databases for use in the app -->
    <script>
        const user = new PouchDB('user');
    </script>
    %svelte.head%
</head>

Then in any ponent that I want to use the database, I add an additional script tag to define the variable "user":

<script lang="ts" context="module">
    //Declare the database name so that it is recognized.
    declare const user;
</script>

<script lang="ts">
//Example use of database.
const addUser = () => {
    //Call the database by name established in app.html
    user.put({
        _id: 'someid',
        firstName: 'Jon',
        lastName: 'doe'
    });
};
</script>

That has been the easiest method for me to employ PouchDB with SvelteKit. Every other solution required significant modifications to configuration files, changes to environment variables, and unnecessary adaptations of code throughout the application. I hope this helps.