Incompatibility between storybook and vue devtools...?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2.9k
- Forks
- 279
- PR merge metrics
- No merged PRs in 30d
Description
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.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction repository and its .storybook/preview.js configuration, then run npm run storybook and reproduce the console TypeError when interacting with the button, header, or page stories. Compare the setup with the Vue 3 Vite Storybook guidance and determine whether the error comes from configuration, Storybook, or Vue Devtools; done means identifying the cause and a confirmed resolution or documented limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- storybook, typescript, vite
- Domain
- devtools, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 28/100