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:

storybookjs/storybook#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.