PouchDB и SvelteKit

Я хочу использовать PouchDB с SvelteKit. Я скопировал pouchdb-7.2.1.js в /src/libd в SvelteKit и переименовал его в pouchdb.js. Pouchdb должен работать в браузере. Поэтому я использовал ssr=false для подавления рендеринга на стороне сервера. Я получаю первую ошибку при импорте. Это моя первая очень короткая страница (couchdb.svelte):

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

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

Я получаю ошибку 500

      import not found: PouchDB

Я безуспешно пробовал много разных версий. Например:

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

Как правильно использовать pouchdb?

Источник

3 ответа

Решение

Вот обходной путь, который использует PouchDB через тег скрипта:

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/pouchdb@7.2.1/dist/pouchdb.min.js"></script>
</svelte:head>

Когда imported, PouchDB, похоже, ожидает определенной среды, которую не предоставляет Svelte / Vite / Rollup. (Svelte / Vite больше всего доволен правильными модулями ESM; PouchDB кажется скриптом "window.global", который был преобразован в модуль JS.)

Может быть способ изменить конфигурацию для создания среды, ожидаемой PouchDB. Думаю, вам придется изменить файл svelte.config.cjs . (В частности,viteраздел , определяющий конфигурацию свертки.)

Вы можете найти подсказки в этой связанной проблеме для PouchDB + Angular.

Я бы просто использовал <script> обходной путь выше.

Источник

Для будущих пользователей Google, пытающихся интегрировать pouchdb-browserи/или RxDBс sveltekit вот изменения, чтобы «исправить» среду для pouchdb в браузере при использовании vite.

  1. Добавь в свой <head>раздел перед %svelte.head%
      <script>
    window.process = window.process || {env: {NODE_DEBUG:undefined, DEBUG:undefined}};
    window.global = window;
</script>
  1. В svelte.config.jsдобавить optimizeDepsк config.kit.vite.optimizeDeps
      optimizeDeps: {
    allowNodeBuiltins: ['pouchdb-browser', 'pouchdb-utils', 'base64id', 'mime-types']
}

Вот коммит, который вносит эти изменения в мое приложение: https://github.com/TechplexEngineer/bionic-scouting/commit/d1c4a4dcdc7096ae40937501d97a7ef9ee10ab66 .

Спасибо:pouchdb/pouchdb#8266 (комментарий)

Источник

Я боролся с этой самой проблемой некоторое время. Я решил пойти другим путем. Это может быть неправильно, но это работает.

Я добавил два скрипта в заголовок app.html:

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

Затем в любом компоненте, который я хочу использовать с базой данных, я добавляю дополнительный тег сценария для определения переменной «пользователь»:

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

Для меня это был самый простой способ использовать PouchDB со SvelteKit. Каждое другое решение требовало значительных модификаций файлов конфигурации, изменений переменных среды и ненужной адаптации кода во всем приложении. Надеюсь, это поможет.

Источник
Другие вопросы по тегам