vue.js - Storybook Vue Typescript: Modul ikke funnet: Feil: Kan ikke løse

Jeg har et Typescript Vue monorepo-prosjekt (yarn workspaces) som inkluderer 3 pakker: web, styles og components. For komponentpakken vil jeg bruke Storybook for visuell testing og isolert utvikling.

Komponentene fungerer riktig når jeg importerer dem i nettprosjektet, men når jeg kjører Storybook får jeg følgende feil:

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

Det ser ut til å være et typescript/vue-importproblem med storybook-managerens webpack-konfigurasjon.

Storybook-konfigurasjon:

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-administratorens webpack-konfigurasjon:

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-mal webpack-konfigurasjon

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;
};

Komponentene importeres ved hjelp av flere index.ts-filer.

GIT-repositorium: https://bitbucket.org/jdkdarts/jdk-darts-frontend/src/31606627861f8674486b854de520e294d7aa6ab2/?at=feature/JDKDAR-03_create_new_game

Relaterte artikler