typescript - Storybook webpack yapılandırmasına yol takma adları nasıl eklenir?

Nextjs ve webpack ile Storybook kullanıyorum. İşte benim .storybook/main.ts dosyam:

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  ...
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  ...
};

export default config;

Bu kombinasyon, bu çalışma alanının tsconfig.json dosyasından TypeScript ayarlarını otomatik olarak alır - bu çok güzel. Sadece Storybook için bazı TypeScript yol takma adları eklemeye çalışıyorum. Çeşitli Stack Overflow cevaplarına dayanarak aşağıdakileri denedim, fakat çalışmıyor - Storybook, @/components gibi yollardan yapılan importlarla karşılaştığında hata veriyor.

const config: StorybookConfig = {
  ...
  webpackFinal: (config) => {
    if (config.resolve) {
      config.resolve.alias = {
        ...config.resolve.alias,
        '@/*': [
          './src/*',
          '../../packages/ui-lib/src/*',
        ],
      };
    }

    return config;
  },
};

Eğer tsconfig.json dosyama aynı takma adları koyarsam, Storybook çalışıyor. Ancak bunu yapmak istemiyorum çünkü bu çalışma alanının tsconfig dosyası ui-lib klasöründeki kaynak kod hakkında hiçbir şey bilmiyor olmalı.

Bunun neden çalışmadığına dair herhangi bir fikrin var mı?

P.S. Ayrıca yolları şöyle belirlemeyi de denedim: path.resolve(__dirname, "../../packages/ui-lib/src") - o da işe yaramadı.

Cevap #1

Hiç tsconfig-paths-webpack-plugin denediniz mi?

Ben de benzer bir sorunla karşılaştım ve bunu şöyle çözdüm:

yarn add -D tsconfig-paths-webpack-plugin
npm install -D tsconfig-paths-webpack-plugin

//main.ts
import type { StorybookConfig } from "@storybook/react-webpack5";

const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

const config: StorybookConfig = {
 //...
   webpackFinal: async (config) => {
    if (config.resolve) {
      config.resolve.plugins = [
        ...(config.resolve.plugins || []),
        new TsconfigPathsPlugin({
          extensions: config.resolve.extensions,
        }),
      ]
    }
    return config;
  },
}