vue.js - Storybook Vue Typescript: Modul hittades inte: Fel: Kan inte lösa

Jag har ett Typescript Vue-monorepo-projekt (yarn workspaces) som inkluderar 3 paket: web, styles och components. För komponentpaketet vill jag använda storybook för visuell testning och isolerad utveckling.

Komponenterna fungerar korrekt när jag importerar dem i webbprojektet, men när jag kör Storybook får jag följande fel:

Module not found: Error: Can't resolve './../components' in 'jdk-darts-frontend/packages/jdk-darts-components/.storybook'
 @ ./.storybook/config.ts

Det ser ut som att det finns ett TypeScript/Vue-importproblem med Storybook-managerns Webpack-konfiguration.

Storybook-konfiguration:

import Vue from 'vue';
import {addParameters, configure} from '@storybook/vue';
import {Button, Card, FinalInput, Icon, Input, Modal, Table} from './../components';

...

Vue.component('d-button', Button);
Vue.component('d-card', Card);
Vue.component('d-icon', Icon);
Vue.component('d-input', Input);
Vue.component('d-final-form-input', FinalInput);
Vue.component('d-modal', Modal);
Vue.component('d-table', Table);

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

configure(loadStories, module);

Storybook-manager webpack-konfiguration:

async function managerWebpack(config, options) {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

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

  config.resolve = {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../components")),
    },
  };

  return config;
}

module.exports = {
  managerWebpack: managerWebpack,
};

Storybook-mall webpack-konfiguration

module.exports = async ({config}) => {
  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.scss', '.html');

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

    config.module.rules.push({
        test: /\.scss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
          data: `@import "~jdk-darts-styles/scss/index.scss";`,
          implementation: require('sass'),
        },
      },
        ],
    });

    config.resolve = {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
      '@': path.dirname(path.resolve(__dirname, "../src")),
    },
    };

    return config;
};

Komponenterna importeras med flera index.ts-filer.

GIT-förråd: https://bitbucket.org/jdkdarts/jdk-darts-frontend/src/31606627861f8674486b854de520e294d7aa6ab2/?at=feature/JDKDAR-03_create_new_game

Relaterade artiklar