vite環境でvue3でstorybookとvite-plugin-vue-devtoolsの競合を避ける方法

結論から言うと、現状storybookではvue-devtoolを無効にするほか無い

方法は、storybookで使用するvite.config.tsを別に用意して、storybookで使用するconfigではvue-devtoolsの読み込みをしないということだ。

.storybook/customVite.config.ts (ファイル名は何でも良い)

...略
import vue from '@vitejs/plugin-vue'
// import vueDevTools from 'vite-plugin-vue-devtools' <-削除する

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // vueDevTools(), <-削除する
  ],
  ....略
})

.storybook/main.ts

export default {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  core: {
    builder: {
      name: '@storybook/builder-vite',
      options: {
        viteConfigPath: './customVite.config.js', // <- 使用するvite.config.tsを指定する
      },
    },
  },
};

以下の公式ドキュメントに記載があります。

Vite | Storybook docs
Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. It...

githubでもissue化されている問題

storybookのブラウザコンソール上と、test-runnerを走らせた際に

Cannot read properties of undefined (reading 'app')

というエラーが発生するというものだ。

storybookで表示する分には、コンソールのエラーが起こるだけでテストコードも走るので問題ないが、test-runnerでのテストが全てエラーとなってしまうのが大問題。

github上では、preview.ts上でapp.useを1度だけ呼ぶようにすることが試されているが改善しない。

タイトルとURLをコピーしました