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.