storybook導入の際にでるエラーの解決方法がわからない

Question

こちらの記事を元にvue環境にstorybookを導入しているのですがcomponents/Button.vueをimportしてstorybookをビルドした段階で下記のようなエラーが出てしまいます。

エラー（テキスト）

ERROR in ./src/components/Button.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|   <button
|     @click="handleClick"
 @ ./src/stories/index.js 2:0-46 6:26-32
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true&quiet=true

こちら.vueファイルに対するloaderの設定が必要なのかと思いwebpack.config.js内rulesに

      {
        test: /.vue$/,
        loader: 'vue-loader'
      }

を書き足してみましたがエラーの解決には至りませんでした。
お手数ですがこちらの解決方法ご教示いただければ幸いです。よろしくお願いいたします。

Answer 1

こんにちは。
私の環境でも類似のエラーが発生し、調査している途中でこちらにたどり着きました。

私の場合は、VueプロジェクトをVueCliを使用して作成していたことが原因でした。
そのため、storybookjs/vue-cli-plugin-storybookを導入することで解決できました。

ざっと調べた程度ですので詳細についてや、その他のユースケースについてお答えはできませんが、少しでも参考になればと思い回答させていただきました。