vite+svelte+pouchdb: Uncaught TypeError: Class extends value [object Object] is not a constructor or null

Question

I am trying to setup a bare minimum configuration using Svelte + PouchDB and running into the above error in the browser. Please see below the steps to reproduce the issue.

Steps to reproduce:

1. Create a bare-bones Vite Scaffold project using Svelte template and verify that it works as expected in the browser

$ npm create vite@latest pouchdb-test -- --template svelte
$ cd pouchdb-test
$ npm install
$ npm run dev

2. Install PouchDB (or pouchdb-browser, the issue is reproduced just the same) $ npm install --save pouchdb

3. Create a DB using PouchDB (Lines 2 and 3 below were added by me. Other lines were present as-is.)

# src/lib/Counter.svelte

<script>
    import PouchDB from "pouchdb"; // <--- or "pouchdb-browser" if that is installed
    const db = new PouchDB('myDB'); // <--- Add this line too

    let count = 0
    const increment = () => {
        count += 1
    }
</script>

<button on:click={increment}>
    count is {count}
</button>

4. Update vite.config.js (Line 7 was added by me. Others were already present.)

# vite.config.js

import {defineConfig} from 'vite';
import {svelte} from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [svelte()],
    define: {global: {}}   // <--- Add this line. If not present then this exception occurs:
                          // Uncaught ReferenceError: global is not defined
                          //    at node_modules/immediate/lib/mutation.js (mutation.js:6:16)
                          //    at __require (chunk-DFKQJ226.js?v=c3a35530:8:50)
                          //    at node_modules/immediate/lib/index.js (index.js:5:3)
                          //    at __require (chunk-DFKQJ226.js?v=c3a35530:8:50)
                          //    at index-browser.es.js:1:23
});

5. Rebuild the program and open the app (http://127.0.0.1:5173) in browser. If you inspect the console then this Exception is thrown: Uncaught TypeError: Class extends value [object Object] is not a constructor or null at index-browser.es.js:457:23

I am unable to understand why this error occurs and how to solve it. Any help or pointers is most welcome.

Absher

Answer 1

Answering my own question. 2 changes helped resolve the issue.

It was found from a similar issue reported in the PouchDB repo https://github.com/pouchdb/pouchdb/issues/8607 (and so credits go to the author of the issue there)

Here are the changes:

1. In vite.config.js change "define: {global: {}}" to include "window"

export default defineConfig({
    plugins: [svelte()],
    define: {global: "window"}   // <--- Add "window" here
});

2. install "events": npm install events

Absher

This worked with vite+react+pouchdb as well. Thank you! – Levin

Hmm, still not working for me. – Convocation

@AlexanderTrauzzi: I am checking your comment rather late, sorry. Is your problem resolved now? Would you clarify what issue you are facing? – Absher

On an electron, vite, react setup the Uncaught TypeError: ... got fixed by only installing events as suggested above in step 2. – Retrusion

Hero!!! I have been searching all day.. Thought i was going crazy.. Installing events did the trick for me with Quasar + Vite + PouchDB – Stockroom

Thank you! Another hint, kind of obvious but I didn't think about it: kill all running dev processes and restart them. – Rosenfeld

Answer 2

I was trying to access pouchdb from a sveltekit +page.ts loader, The above answer worked for me with a couple of tweaks.

Sveltekit was not able to assign window to global in the vite.config.ts, so I omitted that step. I disabled ssr in sveltekit, but +page.ts will run on both the server and the client even with ssr disabled. You'll start seeing errors about window not being found.

I used ES6 dynamic imports to only import pouchdb-browser when the loader is running in the client:

import { browser } from "$app/environment";
import type { PageLoad } from "./$types";

export const load: PageLoad = async ({ params }) => {
  if (browser) {
    const PouchDB = await import("pouchdb-browser");
    // do pouch operations

    return {
        result
    };
  }

  return {};
};

Tootle