Nuxt3環境にStorybook7を導入するにあたって詰まった内容を共有します
Nuxt3 + Storybookで環境を構築したので、その時の対応した内容になります。
各種パッケージのバージョン
※重要なパッケージのみ記載しています。
- "nuxt": "3.0.0"
- "storybook": "^7.0.25"
- "storybook-addon-nuxt": "1.3.3"
- "react": "18.2.0"
- "react-dom": "18.2.0"
基本的な導入をするにあたり、参考にした記事
基本的な導入についてはVue3 + Storybookで問題ないため、ここでは説明しません。
以下の記事を主に参考にしました。
詰まった場所
1. Nuxt.jsでAuto Importを使用している場合、読み込みを行ってくれない
Nuxt.jsでAuto Importを使用している場合、「storybook画面上のエラー」のようなエラー画面になってしまいます。
<template>
<div ref="ref">コンテンツ</div>
</template>
<script lang="ts" setup>
// 「ref」はNuxt側で自動的にimportされる
const ref = ref<HTMLDivElement>()
</script>
storybook画面では以下のようなエラー画面が表示されます。
原因
Nuxt.jsのv3の場合.nuxt/imports.d.tsのファイルで各種VueやNuxtでimportしてくれているものを見ることができます。
export { ref, /* その他 */ } from 'vue';
/* その他 */
けれどもstorybook環境では、.nuxt/imports.d.tsのファイルのあるものは自動的に読み込みは行われていない(nuxt.config.tsとは別の環境)ため、エラーが出ている状態になります。
解決方法
「storybook-addon-nuxt」のAddonを追加すれば、解決します。（Vite環境のみ有効。）
StorybookのissuesにもこちらのAddonが紹介されています。
2023/10/10追記
公式でNuxt.jsが対応されたため、「storybook-addon-nuxt」のAddonについては現在アーカイブになっています。
2023/09/28時点で今回紹介しているAddonはアーカイブされています。
Nuxt.js + Storybookでの変更については以下のものに変更されています。
その他参照
Nuxt.jsのAuto Importについて、詳細を知りたい場合はこちらを参照してください。
2. Nuxt.js(Vue.js)の環境なのに、Reactのバージョンが必要
ERR! Starting in 7.0, react and react-dom are now required peer dependencies of Storybook.
ERR! https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-peer-dependencies-required
ERR!
ERR! It seems that you haven't run Storybook's CLI to upgrade to the latest version.
ERR! The upgrade command will install the required peer dependencies for you and will take
ERR! care of other important auto migrations as well.
ERR!
ERR! If you want to upgrade to the latest prerelease version, please run:
ERR!
ERR! $ npx storybook@next upgrade --prerelease
ERR!
ERR! Otherwise, please run:
ERR!
ERR! $ npx storybook upgrade
ERR!
ERR! If you do not want to use the upgrade commands,
ERR! please install react and react-dom in your project manually.
ERR!
ERR! npm:
ERR! $ npm add react react-dom --dev
ERR!
ERR! yarn:
ERR! $ yarn add react react-dom --dev
ERR!
ERR! pnpm:
ERR! $ pnpm add react react-dom --dev
原因
Storybookの「Migration」にも記載されています。
Starting in 7.0, react and react-dom are now required peer dependencies of Storybook when using addon-docs (or docs via addon-essentials).
Storybook uses react in a variety of docs-related packages. In the past, we've done various trickery hide this from non-React users. However, with stricter peer dependency handling by npm8, npm, and yarn pnp those tricks have started to cause problems for those users. Rather than resorting to even more complicated tricks, we are making react and react-dom required peer dependencies.
解決方法
素直にreactとreact-domのパッケージを入れます。（解決になっていない、、）
reactとreact-domを入れた理由としては以下になります。
1. Storybook公式がreactとreact-domを入れるように推奨しているため
npx storybook@latest initでインストールされるAddon@storybook/addon-essentialsで、「3,929,789（2023/07/13時点）」が1週間でインストールされているもので怪しいパッケージではないため。
2. 試しに@storybook/addon-essentialsをアンインストールしてみたが、エラーが解消しなかったため
addon-docsは追加しておらず、addon-essentialsはインストールしていたため、addon-essentialsはアンインストールしてみたのですがyarn.lock部分にあるパッケージでエラーが出ていたため調査範囲が大きそうだと思い、
以下がエラーが出たものの一例です。
node_modules/markdown-to-jsx/dist/index.modern.js:1:16:
1 │ import*as t from"react";function n(){return n=Object.assign||function(t){for(var n=1;n<arguments.lengt...
╵ ~~~~~~~
You can mark the path "react" as external to exclude it from the bundle, which will remove this
error.
/Users/miwanoshuntarou/code/fezoda/node_modules/esbuild/lib/main.js:1636
let error = new Error(`${text}${summary}`);
3. reactとreact-domを入れておくデメリットが個人的になかったため
- Nuxt.jsの環境のため、
reactとreact-domの影響範囲はStorybookのみと断言できる。 - 検証したリポジトリのものが個人で開発しているもののため、
reactとreact-domがStorybookの箇所以外で使われる可能性が0 -
reactがアップグレードされた際に、storybookをアップグレードしないでreactをアップグレードする場面はなく、storybookをアップグレードされてreactをアップグレードする必要がある場合のみ、reactをアップグレードするため
その他参照
addon-essentialsの詳細については以下になります。
Discussion