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

経緯

Storybookのバージョン５系から６系へのアップデートは、主に設定ファイル周りでの大きな変更が含まれていました。
今回はNext.jsのプロジェクトに新たにStorybookを追加するにあたり、こちらのStorybook６系に対応した記事を参考に導入を進めました。

発生した問題

上記の通り導入後Storybookを起動すると、以下のようなエラーに遭遇しました

error

ERROR in ./components/common/AppInput/index.tsx
Module not found: Error: Can't resolve 'styles/colors' in '/Users/＊＊＊/Projects/＊＊＊/components/common/AppInput'

どうやらNext.jsのデフォルトで解決される絶対Pathの設定がStorybookにされていないため、一部の依存ファイルが読み込めていないようです。
（この場合は絶対パスで指定したstyles/colorが読み込めていません）

解決方法

Storybookの設定ファイル(ver6系からは.storybook/main.jsに統一)に絶対パス解決の設定を記述します。

main.js

// ↓↓↓ここから追記↓↓↓
const path = require('path')
//↑↑↑ここまで↑↑↑

module.exports = {
  stories: ['../components/**/*.stories.@(tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-actions',
    '@storybook/addon-knobs',
    '@storybook/addon-docs',
    '@storybook/addon-a11y',
  ],
  // ↓↓↓ここから追記↓↓↓
  webpackFinal: async (baseConfig) => {
    baseConfig.resolve.modules = [
      ...(baseConfig.resolve.modules || []),
      path.resolve(__dirname, '../'),
    ]
    return baseConfig
  },
  //↑↑↑ここまで↑↑↑
}

これでデフォルトの設定に加えて絶対パスの解決設定がWebpachにロードされるので無事ビルドされます！