Question

vite+svelte+pouchdb：未捕获的 TypeError：类扩展值 [object Object] 不是构造函数或为空

2023-03-22

1011

svelte vite pouchdb

我正在尝试使用 Svelte + PouchDB 设置最低限度配置，但在浏览器中遇到了上述错误。请参阅以下步骤来重现问题。

重现步骤：

使用 Svelte 模板创建一个基本的 Vite Scaffold 项目，并验证它是否在浏览器中按预期工作

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

安装 PouchDB（或 pouchdb-browser，问题重现方式相同） $ npm install --save pouchdb
使用 PouchDB 创建数据库（下面的第 2 行和第 3 行是我添加的。其他行按原样存在。）

# 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>

更新 vite.config.js（第 7 行是我添加的。其他行已经存在存在。）

# 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
});

重建程序并在浏览器中打开应用程序（ http://127.0.0.1:5173 ）。如果您检查控制台，则会抛出此异常： Uncaught TypeError：Class extends value [object Object] is not a construction or null at index-browser.es.js:457:23

我无法理解为什么会发生此错误以及如何解决它。非常欢迎任何帮助或指点。

Answer 1

回答我自己的问题。2 项更改有助于解决问题。

它是从 PouchDB repo 中报告的类似问题中发现的 https://github.com/pouchdb/pouchdb/issues/8607 （因此，功劳归于该问题的作者）

以下是更改：

在 vite.config.js 中，将“define: {global: {}}”更改为包含“window”

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

安装“events”： npm install events

Answer 2

我尝试从 sveltekit +page.ts 加载器访问 pouchdb，上面的答案对我而言只需进行一些调整即可。

Sveltekit 无法在 vite.config.ts 中将 window 分配给 global ，因此我省略了该步骤。我在 sveltekit 中禁用了 ssr，但即使禁用了 ssr， +page.ts 也将在服务器和客户端上运行。您将开始看到有关未找到 window 的错误。

我使用 ES6 动态导入仅在加载器在客户端中运行时导入 pouchdb-browser ：

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 {};
};