既存のNuxtプロジェクトにStorybookをインストールする

2024/12/02 更新

このやり方、アカンでしたmm

• @nuxtjs/storybookを使って、コンテナ分けてやるにはできない（僕の環境においてはですが）
  • .nuxtを読み取り・書き込みしているようなので、コンテナ分ける場合はシェアする必要がある
• @nuxtjs/storybookをつかわず、Storybookそのものを別コンテナにインストールしたらいけるかも？
  • 未検証

概要

• 今のNuxtを採用しているリポジトリにStorybookをインストールときのメモ
• バージョン
  • nuxt@3.13.2
  • storybook@8.3.2

手順

Nuxt Storybookでいれる

$ npx nuxi@latest module add storybook

packages.json等は勝手に書き換えてくれる

ただ、起動しようとするとエラーがでる

$ yarn run storybook -- --no-open

# ...
✘ [ERROR] The entry point "vue" cannot be marked as external

/app/node_modules/@storybook/cli/bin/index.js:23
  throw error;
  ^

Error: Build failed with 1 error:
error: The entry point "vue" cannot be marked as external
    at failureErrorWithLog (/app/node_modules/vite/node_modules/esbuild/lib/main.js:1472:15)
    at /app/node_modules/vite/node_modules/esbuild/lib/main.js:945:25
    at /app/node_modules/vite/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.14.0
error Command failed with exit code 7.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

こうする

~/.storybook/main.ts

import type { StorybookConfig } from "@storybook-vue/nuxt";

const config: StorybookConfig = {
  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {},
+  viteFinal: (config) => {
+    config.optimizeDeps = {
+      include: ['vue'],
+    };
+    return config;
+  },
};
export default config;

これでおｋ

他に発生したエラー

Storybookは起動したけど、画面上で表示されたエラー

Failed to fetch dynamically imported module: http://localhost:6006/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_addon-essentials_docs_preview.js?v=2bcf0a9a

  viteFinal: (config) => {
    config.optimizeDeps = {
      include: ['vue', 'jsdoc-type-pratt-parser'],
    };
    return config;
  },

viteFinal 部分に jsdoc-type-pratt-parser を追加した

雑感

まだ何もわかっていない