🗂

StorybookでModuleNotFoundError コンポーネントのインポートができない...

2022/07/15に公開

エラー

初めてStoriesを作ろうと思ったら、

ModuleNotFoundError: Module not found: Error:
Can't resolve 'components/common/footer/FooterMenuItem' in '/Users/maimaineet/Workspace/hoge/fuga/stories/common/footer'

と言われてしまった......

解決策

絶対パスの設定をする。

.storybook/main.js
const path = require('path') // 追記

module.exports = {
  stories: ...
  addons: [
      ...
  ],
  // 以下、追記
  webpackFinal: async (baseConfig) => {
    baseConfig.resolve.modules = [
      ...(baseConfig.resolve.modules || []),
      path.resolve(__dirname, '../'),
    ]
    return baseConfig
  },
}

参考:Storybook(ver.6系)でNext.jsの絶対パスインポートに対応する

ベースのパスを指定してあげないといけないみたいです。

GitHubで編集を提案

Discussion