Сборник рассказов с Vue в TypeScript, как импортировать из файла .storybook.ts (конфигурации Webpack)?

Я использую Storybook с Vue в TypeScript. Есть пока нет официальных конфигураций TypeScript для использования Vue со сборником рассказов.

Как настроить Webpack, чтобы в .storybook.ts можно было импортировать из другого файла .storybook.ts?

В настоящее время я получаю сообщение об ошибке:

ERROR in ./src/components/Button/Button.stories.ts
Module not found: Error: Can't resolve '../Icon/Icon.stories'
in '/Users/dude/monorepo/frontend/storybook/src/components/Button'

С этим импортом:

import AppButton from './Button.vue';
import { iconPackOptions, iconPackDefaultValue } from '../Icon/Icon.stories';

Когда файл Источник/компоненты/Иконка/Icon.stories.ts имеет такое содержимое, как:

import { storiesOf } from '@storybook/vue';
import { withKnobs, text, select } from '@storybook/addon-knobs';

import AppIcon from './Icon.vue';

// Knobs grouping
const groupId01 = 'icon';

// Icon Pack
export const iconPackOptions = {
  None: false,
  FontAwesomeProRegular: 'far',
  FontAwesomeFreeBrands: 'fab'
};
export const iconPackDefaultValue = iconPackOptions.FontAwesomeProRegular;

С содержимым файла ./.сборник рассказов/webpack.config.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path');

module.exports = async ({ config }) => {

  config.module.rules.push({
    test: /\.css$/,
    loaders: ['style-loader', 'css-loader', 'postcss-loader'],
    include: path.resolve(__dirname, '../'),
  });

  config.module.rules.push({
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader'],
    include: path.resolve(__dirname, '../assets/styles')
  });

  config.resolve = {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      'assets': path.resolve('../src/assets'),
      '@': path.join(__dirname, '../src'),
    }
  };

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        },
      }
    ]
  });

  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
};

С содержимым файла ./.рассказ/config.js:

import { configure } from '@storybook/vue';

import '../src/plugins';
import '../src/assets/styles/main.scss';

const req = require.context('../src/components', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

🤔 А знаете ли вы, что...
JavaScript активно развивается, и новые версии языка регулярно включают новые функции и улучшения.