Storybookで`@`のエイリアス使ったらエラーが出て困ったこと

はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsで開発中にStorybookで@のエイリアス使ったらエラーが出て困ったことについて備忘録として記載します。

結論

以下のように.storybook/main.tsを修正したら治りました。

.storybook/main.ts

import type { StorybookConfig } from '@storybook/nextjs';
import path from 'path'; // ← 追加

const config: StorybookConfig = {
  "stories": [
    "../src/**/*.mdx",
    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-onboarding",
    "@storybook/addon-interactions"
  ],
  "framework": {
    "name": "@storybook/nextjs",
    "options": {}
  },
  "docs": {
    "autodocs": "tag"
  },
  // ↓↓↓↓↓↓追加↓↓↓↓↓↓
  "webpackFinal": async (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src'),
      };
    }
    return config;
  },
  // ↑↑↑↑↑↑追加↑↑↑↑↑↑
};
export default config;

参考URL

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！