検証: storybook と app routerとMSWを動くか試す
Motivation
↑本当に動くのか確認したいので、サンプルレポジトリを動かす。
hr.icon
作業
clone
run dev
動いた
run storybook
そもそも、storybook開けないんだが。。
プレビューでデプロイされているstorybookは動いているなぜなのか。
エラー
code: error1.sh
✘ ERROR Could not resolve "@storybook/addons" node_modules/.pnpm/storybook-addon-module-mock@1.1.3_@types+react@18.2.43_react@18.2.0/node_modules/storybook-addon-module-mock/dist/cjs/ModuleMock/register.js:26:25:
26 │ const addons_1 = require("@storybook/addons");
╵ ~~~~~~~~~~~~~~~~~~~
You can mark the path "@storybook/addons" as external to exclude it from the bundle, which will
remove this error. You can also surround this "require" call with a try/catch block to handle this
failure at run-time instead of bundle-time.
code: error2.sh
✘ ERROR Could not resolve "@storybook/api" node_modules/.pnpm/storybook-addon-module-mock@1.1.3_@types+react@18.2.43_react@18.2.0/node_modules/storybook-addon-module-mock/dist/cjs/ModuleMock/register.js:27:22:
27 │ const api_1 = require("@storybook/api");
╵ ~~~~~~~~~~~~~~~~
You can mark the path "@storybook/api" as external to exclude it from the bundle, which will
remove this error. You can also surround this "require" call with a try/catch block to handle this
failure at run-time instead of bundle-time.
code: error-summary.sh
Error: Build failed with 2 errors:
node_modules/.pnpm/storybook-addon-module-mock@1.1.3_@types+react@18.2.43_react@18.2.0/node_modules/storybook-addon-module-mock/dist/cjs/ModuleMock/register.js:26:25: ERROR: Could not resolve "@storybook/addons"
node_modules/.pnpm/storybook-addon-module-mock@1.1.3_@types+react@18.2.43_react@18.2.0/node_modules/storybook-addon-module-mock/dist/cjs/ModuleMock/register.js:27:22: ERROR: Could not resolve "@storybook/api"
分析
実際、node_modulesの@storybook見ると、確かに無い。
試行
最新の、v8.0.0-alpha.6にしてみる?
変わらず。
足りないパッケージインストールしてみる。
pnpm add @storybook/api @storybook/addons --save-dev
v8.0.0-alpha.6を入れようと思ったけど、なかった。
storybook コマンドで、storybookが展開されるところまでは出来た。
ただし、@storybook/jestが足りないエラー
code:error.sh
Error: Cannot find module '@storybook/jest'
pnpm add @storybook/jest --save-dev
これで最終解決した。
差分
https://gyazo.com/f1d7627d8210f38fb69e34c3cbafe427
https://gyazo.com/7c5a3842a92347b48e656fc498c56527
動作確認出来た。
hr.icon
サンプルから、必要なことを整理する。(実際に実行出来ていないので推測)
storybook関連のパッケージで、v8系を利用する。
v8系の最新が望ましい。
npx storybook@next upgrade --prerelease みたいに入れる方がいいかも?
code: error.sh
• Checking for latest versions of '@storybook/*' packages
SB_CLI_UPGRADE_0002 (UpgradeStorybookPackagesError): There was an error while trying to upgrade your Storybook dependencies.
Command:
npx npm-check-updates@latest /storybook/ --upgrade --target @next --reject @nrwl/storybook,@nx/storybook
Error:
のようなエラー出るので微調整必要。
実行後、pnpm i
storybook/main.tsの修正
code: .storybook/main.ts
// .storybook/main.js
export default {
features: {
experimentalNextRSC: true,
},
};
必要ぽかったら、入れる
@storybook/api
@storybook/addons
@storybook/jest
v8系は無い。
msw利用
その他
code:preview.ts
import type { Preview } from '@storybook/react';
import { initialize } from 'msw-storybook-addon';
initialize({
onUnhandledRequest: 'bypass',
});
const preview: Preview = {
parameters: {
// 好きに書き換える
actions: { argTypesRegex: '^onA-Z.*' }, },
};
export default preview;
ただし、このaddonは別に利用しなくても良い。
hr.icon
ref
2024/01においては、ベータ版の利用ハック的解決のコストが、Server component よりのアーキテクチャで出来るstorybook 上のテストが割に合わないので、mswの利用をやめた
こっちの例だと、msw1を利用している