如何解决Vue+Storybook配置Pinia时的TypeError:读取'app'错误？

我准备了一个可复现该问题的示例项目，地址为：https://github.com/eric-g-97477-vue/dev-tools-plugin-test

项目创建步骤如下：

• 创建默认Vue项目：

  $ npm create vue@latest
  
  > 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
  

  其中TypeScript、Vue Router、Pinia选择了“Yes”。
• 执行npm install初始化项目。
• 运行npx storybook@latest init集成Storybook。
• 配置Storybook支持Pinia，在.storybook/preview.js中添加以下代码：

  import { setup, type Preview } from '@storybook/vue3';
  import { createPinia } from 'pinia';
  
  setup((app) => {
      app.use(createPinia());
  });
  

• 运行npm run storybook后，点击button、header或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
  

请问我的配置遗漏了什么？

这个错误是Vue DevTools插件与Storybook中Pinia的初始化时机冲突导致的。直接的解决方法是在Storybook配置中禁用Vue DevTools：

修改.storybook/preview.js文件，添加vueDevtools: false参数：

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

setup((app) => {
    app.use(createPinia());
});

const preview = {
  parameters: {
    vue: {
      vueDevtools: false,
    },
  },
};

export default preview;

如果需要保留Vue DevTools，可以尝试更新Storybook和Pinia到最新版本，版本不兼容也可能引发此类问题：

npm update @storybook/vue3 pinia

内容的提问来源于stack exchange，提问作者Eric G