tsconfigのpath設定をstorybookに反映させる方法

dev環境でコンポーネントを取得するpathの書き方が
storybook上ではエラーとなっていた
原因はtsのエイリアス設定がstorybookに反映されていない為であり
.storybook/main.ts
をいじる必要がある

main.jsを修正するコードはすぐに見つかったが
main.tsを修正するコードは見つからなかったので
main.jsを参考に修正を試みたところ、どうしても動かず困り果てていたが
ふと、公式を検索すれば解決するのではと調べたところ、全く同じ事例(ページ表示後に要素が挿入されて表示がずれます。スクロールして「TypeScript modules are not resolved within Storybook」の所が参照元)が載っていた
二通りやり方があるのでここに示す

プラグインを使う方法

.storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ];
    }
    return config;
  },
};

export default config;

'tsconfig-paths-webpack-plugin'
名前の通りtsconfigのpath設定を反映させてくれるのでこれがシンプルな解決策

プラグインを使わない方法

.storybook/main.ts

import path from 'path';
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
};

export default config;

自身で設定する

ハマっていた内容

私が最初に試していた方法は後者の方法で

tsconfig.json

"paths": {
      "@/*": ["./src/*"]
    }

tsconfigの記述に合わせるため下記のように書いていたが動かなかった

.storybook/main.ts

config.webpackFinal = (config) => {
  config = {
    ...config,
    resolve: {
    ...config.resolve,
      alias: {
        ...config.resolve?.alias,
        "@/*": path.resolve(__dirname, "../src/*"),
      }
    }
  }
  
  return config

上記から末尾の/*を両方とも削除したものを貼り付けると正しく動く
*だけ削除では動かない

わざわざtsconfigの書き方と異なる記述をする気になれないのでプラグインを使う方法を採用