Vite+Svelte+PouchDB报错：Class extends value非构造函数问题求助

核心问题原因 #

你设置的define: {global: {}}是错误的——PouchDB依赖浏览器环境的全局对象，空对象会导致其内部类继承逻辑失效，抛出构造函数相关错误。另外，通用版pouchdb包可能包含Node.js环境的冗余代码，增加了浏览器环境的适配风险。

分步解决方案 #

1. 修正Vite配置中的全局对象映射 #

修改vite.config.js，将global正确映射到浏览器的window对象：

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

export default defineConfig({
    plugins: [svelte()],
    define: {
        global: 'window' // 替换原有的空对象配置
    }
});

2. 切换为浏览器专用的PouchDB包 #

卸载通用版pouchdb，安装专为浏览器优化的pouchdb-browser：

npm uninstall pouchdb
npm install pouchdb-browser

3. 更新组件中的导入代码 #

在src/lib/Counter.svelte中更新导入路径：

<script>
    import PouchDB from "pouchdb-browser";
    const db = new PouchDB('myDB');

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

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

4. 重启开发服务 #

停止当前的npm run dev进程，重新启动：

npm run dev

验证 #

打开浏览器访问http://127.0.0.1:5173，控制台不再抛出构造函数错误，PouchDB实例可正常初始化。

内容的提问来源于stack exchange，提问作者Hariharan Narayanan