既存プロジェクトにStorybookを導入した際に遭遇したエラーまとめ

アクセストークンが取得できない時のエラー

React Use Context : Cannot destructure property 'token' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined

解決方法：
React Contextをコンポーネント内で使用している場合に、使用しているProviderを参照できずにエラーになっているのでstorybookでも参照できるようにする必要があり、preview.jsにdecoratorを追加すれば解消する。

.storybook/preview.js

 decorators: [
    (Story) => (
      <>
        <PhotopeerContext.Provider value={{currentUser: null, hasAccessToken: () => {return true}}}>
          <UserLikedPostsContext.Provider value={{likedPosts: [], addLikedPosts: () => {}, removeLikedPosts: () => {}, toggleLikeInProgress: false}}>
              <Story />
          </UserLikedPostsContext.Provider>
        </PhotopeerContext.Provider>
      </>
    ),
  ],

NavLinkがある場合のエラー

Error
useLocation() may be used only in the context of a <Router> component.

解決方法：
storybook側でもNavLinkが機能するようにする必要があり、preview.jsにBrowserRouterを追加すれば解決する。

.storybook/preview.js

 decorators: [
    (Story) => (
      <>
         <BrowserRouter>
           <Story />
         </BrowserRouter>
      </>
    ),
  ],

コンポーネントの定義が適切でない場合のエラー

Error
Unable to index ./src/stories/parts/Card/CardNote/Card.stories.js:
NoMetaError: CSF: missing default export /Users/chinomi_ryosuke/Documents/idealump_dev/photopeer/photopeer-frontend/src/stories/parts/Card/CardNote/Card.stories.js (line 1, col 0)

解決方法：
エラーの記述にもあるようにCSF(https://storybook.js.org/docs/api/csf)のフォーマットに合わせる必要があり、functionの定義の仕方を変えることで解消できる。

src/component

function CardNote(props) {}
↓
const CardNote = ({ props }) => {}