ReferenceError: indexedDB is not defined

[ianlucasdiaz95]

Describe the bug

Im using indexedDB with @tanstack/vue-query to persist query state across refreshes, but it generates some kind of conflict with histoire, I tried setting fake/indexedDB like I do when testing with no success.

My setup:

import '../assets/main.css';
import './histoire.css';

import { createPinia } from 'pinia';
import { defineSetupVue3 } from '@histoire/plugin-vue';
import { Icon } from '@iconify/vue';
import { VueQueryPlugin } from '@tanstack/vue-query';
import { createMemoryHistory, createRouter } from 'vue-router';

export const setupVue3 = defineSetupVue3(({ app }) => {
  app.use(
    createRouter({
      history: createMemoryHistory(),
      routes: [
        {
          path: '/room/',
          name: 'RoomView',
          component: { render: () => null },
        },
        {
          path: '/event/',
          name: 'EventView',
          component: { render: () => null },
        },
        {
          path: '/experience/',
          name: 'ExperienceView',
          component: { render: () => null },
        },
      ],
    }),
  );

  app.use(VueQueryPlugin, {});
  app.component('IconifyIcon', Icon);
  app.use(createPinia());
});

I tried creating a new instance of vue-query, the problem is that my stores still import the original vue-query client where indexedDB is imported, generating this conflict:

Error while collecting story C:/xampp/htdocs/legendaryum/web-app/src/stories/GenericCard.story.vue:
ReferenceError: indexedDB is not defined
    at Module.createStore (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/idb-keyval/dist/index.js:10:19)
    at C:\xampp\htdocs\legendaryum\web-app\src\plugins\vue-query.ts:34:56
    at async ViteNodeRunner.runModule (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:342:5)
    at async ViteNodeRunner.directRequest (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:326:5)     
    at async ViteNodeRunner.cachedRequest (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:189:14)    
    at async ViteNodeRunner.dependencyRequest (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:223:12)
    at async C:\xampp\htdocs\legendaryum\web-app\src\stores\payments.ts:4:31
    at async ViteNodeRunner.runModule (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:342:5)
    at async ViteNodeRunner.directRequest (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:326:5)     
    at async ViteNodeRunner.cachedRequest (file:///C:/xampp/htdocs/legendaryum/web-app/node_modules/histoire/node_modules/vite-node/dist/client.mjs:189:14)    

Reproduction

Run npm run story:dev

Stackblitz Repro

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 AMD Ryzen 5 3550H with Radeon Vega Mobile Gfx
    Memory: 4.23 GB / 13.93 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    bun: 1.1.2 - C:\Program Files\nodejs\bun.CMD
  Browsers:
    Edge: Chromium (124.0.2478.105)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    @histoire/plugin-vue: ^0.17.17 => 0.17.17
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4
    histoire: ^0.17.17 => 0.17.17
    vite: ^5.2.11 => 5.2.11

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• histoire-vue3-starter-jlreew (Open reproduction)