Incompatibility between storybook and vue devtools...?

[eric-g-97477]

Summary

I am getting a strange error in the console when trying to configure Storybook to use Pinia within a Vue & Vite project....

I have a simple reproduction case at https://github.com/eric-g-97477-vue/dev-tools-plugin-test

To create this, I did the following...

(1) I created the default vue Project

$ npm create vue@latest                                                                                                                                                                                                                                     10:25:02

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … devtools_test
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › No

Scaffolding project in /Users/eric.g/depot/vue/devtools_test...

Done. Now run:

  cd devtools_test
  npm install
  npm run dev

(2) I initialized the project with npm install.

(3) I ran npx storybook@latest init

(4) I then setup storybook to be able to use Pinia. Based on https://storybook.js.org/docs/get-started/frameworks/vue3-vite, I added

import { setup, type Preview } from '@storybook/vue3';
import { createPinia } from 'pinia';
 
setup((app) => {
    app.use(createPinia());
});

to .storybook/preview.js.

(5) I then run npm run storybook and the below error appears in the console when I click around using the stories for button, header, or page.

index.js?v=eab36b85:2603 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'app')
    at Object.get (index.js?v=eab36b85:2603:57)
    at index.js?v=eab36b85:4507:13
    at index.mjs?v=eab36b85:48:66
    at index.mjs?v=eab36b85:48:56

Either I have missed something in the configuration or there is a bug in either storybook or the vue devtools. I am not sure which is the case between those three options.

[webfansplz]

Can you provide a mini repo? Thanks 🙏

[eric-g-97477]

Can you provide a mini repo? Thanks 🙏

I tried to do that with this... https://github.com/eric-g-97477-vue/dev-tools-plugin-test

did you want something more? Also, the procedure I used to create my reproduction is fully described. I did nothing unusual. I used the code generated by default and modified a tiny bit to integrate Pinia.

[eric-g-97477]

I submitted the same report to Storybook and they came back with:

https://github.com/storybookjs/storybook/issues/29757

This appears to be a conflict between Vue Devtools and Storybook's Vue3 setup. The error occurs because Vue Devtools is trying to access the app instance in a way that's incompatible with Storybook's setup.

Hopefully this issue with the Vue Devtools can be resolved quickly.

[yannbf]

Hey @webfansplz it seems that __VUE_DEVTOOLS_KIT_ACTIVE_APP_RECORD__ is undefined when switching between stories, but it only happens when pinia is set multiple times (every time you visit a different story in Storybook).

Perhaps things changed over time, in Storybook we set this up in the global scope https://github.com/storybookjs/storybook/blob/f2218fa40feb3acc45cba288f56596d439455952/code/core/assets/server/base-preview-head.html#L444

      window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.top.__VUE_DEVTOOLS_GLOBAL_HOOK__;
      window.top.__VUE_DEVTOOLS_CONTEXT__ = window.document;

maybe there is more that needs to be done?

I'll add more details related to the Storybook side of things in the Storybook issue, but we can discuss the Vue dev tools part here maybe? I noticed in Eric's repro that the dev tools just won't load:

I tried many versions in the 7.x range and the behavior was always the same. I then tried 1.0.0 and it loaded correctly so I'm suspecting we need to do something more.

[zyxneo]

Same issue here @eric-g-97477 . Notice the console error:

Another version of Vue Devtools seems to be installed. Please enable only one version at a time.

The project is quite fresh, initialized with npm create vue@latest:

✔ Project name: … shared-component-library
✔ Add TypeScript? … Yes
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? … Yes

the vite.config.ts is the only visible source of the vueDevtools

plugins: [
        vue(),
        vueDevTools(),
        dts({...}),
    ],

        "@storybook/vue3": "^8.6.0",
        "@storybook/vue3-vite": "^8.6.0",
        "vite-plugin-vue-devtools": "^7.7.2",

[moritz-baecker-integra]

The same problem exists when using Cypress component tests and Vue dev tools

[semihher]

The same problem with Vitest Browser and Vue Dev Tools.

[naramdash]

I have a similar issue about conflict with vueDevtools(v8.0.0) and Storybook(v9.1.2).

Current runtime info

• Ubuntu 24.04.3 LTS x86_64
• node@24
• [email protected]
• [email protected]

Current Deps info

• vueDevtools (v8.0.0)
• vite (v7.1.2)
• storybook (v9.1.2)

This issue can be reproduced by below steps. (npm & pnpm)

1. Create vite based vue project by pnpm create vite
2. pnpm install --save-dev vite-plugin-vue-devtools
3. Apply vueDevtools() plugin

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevtools from "vite-plugin-vue-devtools";

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), vueDevtools()],
});

4. pnpm create storybook with Minimal option & vue3
5. then crash shown

=> Failed to build the preview
Error: Can not found environment context for client

6. Comment vueDevtools() in vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueDevtools from "vite-plugin-vue-devtools";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // vueDevtools()
  ],
});

7. pnpm run storybook, no crash