Storybook の main.js 内で webpack の alias の設定をするときは「マージ」する

結論

マージしないと webpack 指定外の場所から import ができなくなります*1。

main.js の例

.storybook/main.js の例は、例えば以下のような感じです。

const path = require('path')

module.exports = {
  // （途中省略）
  webpackFinal: async (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "@": path.resolve(__dirname, '../src')
    }

    // （途中省略）

    return config
  }
}

参考になるドキュメント

他のフロントエンド関係のプロダクトと同様、Storybook も大変に動きが早い*2ので、基本的には 公式ドキュメント を見るべきだと思います。

2021/04/25 現在では、以下の記事が参考になりました。ありがとうございます。

zenn.dev

zenn.dev

storybook.js.org

*1:多くの場合はそれで問題ないとは思いますが……

*2:たとえば、設定は main.js ひとつにまとめるようになった、など