tsconfigにbaseUrlを設定したプロジェクトで Storybookからcomponentを使う

はじめに

Next.jsでTypscriptのプロジェクトを扱う際に、
tsconfig.jsonのbaseUrlを設定することで、
各モジュールで絶対パス指定でimportできる、という仕組みがあります。
https://nextjs.org/docs/advanced-features/module-path-aliases

こちらの設定をしているcomponentをそのままStorybookで読み込もうとすると、
Module not found: Error: Can't resolve *** in ***
というエラーになっていまします。

本記事はこの設定をしたまま、Storybookでモジュールを読みこむための設定の仕方を記載しています。

設定方法

https://github.com/storybookjs/storybook/issues/4136#issuecomment-900426566
こちらのStorybookのissueを参考にしました。

1. tsconfig-paths-webpack-pluginの導入
2. main.jsの書き換え

の2ステップで設定します。

tsconfig-paths-webpack-pluginの導入

https://github.com/dividab/tsconfig-paths-webpack-plugin
webpackのプラグインで、tsconfigの設定を利用することができるようになる、というもののようです。
インストールは
yarn add --dev tsconfig-paths-webpack-plugin
or
npm install --save-dev tsconfig-paths-webpack-plugin
でOK

main.jsの書き換え

本家のプラグインはwebpack.config.jsを編集するようですが、今回はStorybookの設定ファイルの.storybook/main.jsを編集します。

.storybook/main.js

+const path = require('path')
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
+  webpackFinal(config) {
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, '../src')
+    ]

+    config.resolve.plugins = [
+      ...(config.resolve.plugins || []),
+      new TsconfigPathsPlugin()
+    ]
+    return config;
+  },
  "framework": "@storybook/react"
}

こちらでnpm run storybookでエラーが出無くなれば成功です！

おわりに

main.jsの設定は
https://zenn.dev/enish/articles/ff678649ecb6d9
こちらと併用する場合は

const path = require('path')
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  webpackFinal(config) {
    delete config.resolve.alias['emotion-theming'];
    delete config.resolve.alias['@emotion/styled'];
    delete config.resolve.alias['@emotion/core'];
    config.resolve.modules = [
      ...(config.resolve.modules || []),
      path.resolve(__dirname, '../src')
    ]

    config.resolve.plugins = [
      ...(config.resolve.plugins || []),
      new TsconfigPathsPlugin()
    ]
    return config;
  },
  "framework": "@storybook/react"
}

こんな感じになるかと思います。
現状問題なく併用できているのでMUIをお使いの方は参考にどうぞ！