[Bug]: Incompatibility between storybook and vue devtools...?

[eric-g-97477]

Describe the bug

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

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.

Reproduction link

https://github.com/eric-g-97477-vue/dev-tools-plugin-test

Reproduction steps

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

System

Storybook Environment Info:

  System:
    OS: macOS 14.7
    CPU: (16) arm64 Apple M3 Max
    Shell: 3.7.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.17.0/bin/yarn
    npm: 10.9.0 - ~/depot/myproject/node_modules/.bin/npm <----- active
    pnpm: 9.14.4 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.0.1
  npmPackages:
    @storybook/addon-designs: 8.0.4 => 8.0.4
    @storybook/addon-essentials: 8.4.5 => 8.4.5
    @storybook/addon-interactions: 8.4.5 => 8.4.5
    @storybook/addon-links: 8.4.5 => 8.4.5
    @storybook/addon-themes: 8.4.5 => 8.4.5
    @storybook/blocks: 8.4.5 => 8.4.5
    @storybook/manager-api: 8.4.5 => 8.4.5
    @storybook/test: 8.4.5 => 8.4.5
    @storybook/theming: 8.4.5 => 8.4.5
    @storybook/vue3: 8.4.5 => 8.4.5
    @storybook/vue3-vite: 8.4.5 => 8.4.5
    eslint-plugin-storybook: 0.11.1 => 0.11.1
    storybook: 8.4.5 => 8.4.5

Additional context

No response

[greptile-apps[bot]]

Disclaimer This information might be inaccurate, due to it being generated automatically 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.

To resolve this, modify your .storybook/preview.js to disable Vue Devtools in Storybook:

import { setup } from '@storybook/vue3';
import { createPinia } from 'pinia';

setup((app) => {
  // Disable Vue Devtools in Storybook
  app.config.devtools = false;
  app.use(createPinia());
});

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Edit Issue Bot Settings](https://app.greptile.com/enrich/github) · [Greptile](https://greptile.com)

[eric-g-97477]

Adding app.config.devtools = false; did not disable the devtools.

I get an error saying that devtools does not exist on type AppConfig.

It would help if I could be told how to modify my reproduction case to disable the devtools for storybook.