$ 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
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.
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
(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
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.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.