Zenn
Closed3

storybook + msw が動かなくて困った件

Storybook
MSW
devalondevalon

next.js 環境に storybook + msw を入れようとしてハマった記録。

🔴 Error: It looks like you are having a known issue with package hoisting.
Please check the following issue for details and solutions: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092


/Users/devalon/src/nextjs-sample/node_modules/@storybook/cli/bin/index.js:23
  throw error;
  ^

Error: Cannot find module 'strip-ansi'
Require stack:
  • 指示通り、https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 に行ってみる。
    • 依存関係でなんか起こってるぽい。resolutionで解決しようかと思ったが、yarnのバージョン上げれば良さそうなのでこれを機にyarn v1 から脱却してみる。
  • https://zenn.dev/mizchi/articles/yarn-v1-to-v3 とか見ながらやってみる。
    • yarn set version berry して 新しいyarnファイルをgitignoreするくらいでさくっとアップデート出来た 🎉
  • 最新では既にv3じゃなくてv4になってる模様。package.json も更新された。
+ "packageManager": "yarn@4.0.1"
  • ここでやっと yarn storybookが通ってサンプルのstoryが動いた 🎉
devalondevalon

本題の storybook に msw を入れてみる。

TypeError: setupWorker is not a function
    at initialize (mswDecorator.js:10:1)
    at ./.storybook/preview.tsx (preview.tsx:8:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Object.getProjectAnnotations [as nextFn] (storybook-config-entry.js:9:1)
    at runtime.js:4:80022
    at Array.forEach (<anonymous>)
    at SynchronousPromise4._runResolutions (runtime.js:4:79963)
    at SynchronousPromise4.then (runtime.js:4:77505)
    at PreviewWeb.getProjectAnnotationsOrRenderError (runtime.js:81:13211)
devalondevalon

該当箇所はここ
https://github.com/mswjs/msw-storybook-addon/blob/0ff898a0272df0a6eeebe9faa09b3690509a8b53/packages/msw-addon/src/mswDecorator.ts#L34-L35

  • setUpWorker が undefinedぽい。
    • どこを見ても上記のaddon入れて動きましたみたいな記事ばかりで混乱。
  • msw の公式に行ってみる。
  • ブラウザーの場合のmswの初期化処理を読む。
  • おや、 'msw/browser' からimport しなきゃだめなんでは気づく。
  • msw-storybook-addon のコードに戻る。

https://github.com/mswjs/msw-storybook-addon/blob/0ff898a0272df0a6eeebe9faa09b3690509a8b53/packages/msw-addon/package.json#L44-L46

このスクラップは2023/11/01にクローズされました