Импорт неверного пути внутри Vue Сборник рассказов - PullRequest
Новая
       9

Импорт неверного пути внутри Vue Сборник рассказов

0 голосов
/ 05 апреля 2020

Я новичок в Vue, и я столкнулся с проблемой, касающейся его и Storybook, когда дело доходит до использования псевдонима для импорта файлов:

У меня есть компонент SvgIcon: 

<template>
    <div>
        props from the icon: {{this.$props}}
        <svg v-if="icon" class="svg-icon">
            <title v-if="title">{{ title }}</title>
            <use v-bind="{ 'xmlns:xlink':'http://www.w3.org/1999/xlink', 'xlink:href': icon }"></use>
        </svg>
        <img v-else-if="image" :src="image" class="image-icon"/>
    </div>
</template>

<script>
export default {
    name: 'SvgIcon',
    data: function() {
        return {
            icon: null,
            image: null
        }
    },
    props: {
        title: {
            type: String,
            default: ''
        },
        iconFallback: {
            type: String,
            required: false
        },
        iconId: {
            type: String,
            required: true,
            validator(iconName) {
                if (!iconName) {
                    console.warn('icon can not be empty')
                    return false
                }
                return true
            }
        }
    },
    watch: {
        iconId: {
            immediate: true,
            handler(iconId) {
                iconId && import(`@/assets/icons/${iconId}.svg`)
                    .then(svg => {
                        // debugger
                        console.log(this, 'this from SvgIcon')
                        if (Object.prototype.hasOwnProperty.call(svg, 'default')) {
                            this.icon = svg.default
                        } else {
                            this.icon = svg
                        }
                    }).catch(() => {
                        this.image = this.iconFallback && require(`@/assets/icons/${this.iconFallback}.png`)
                    })
            }
        }
    }
}
</script>

<style scoped lang="scss">

svg {
    width: 32px;
    height: 32px;
    vertical-align: middle;

    &.icon-status {
        width: 14px;
        height: 14px;
        min-width: 14px;
        transform: translateY(-6%);
        fill: $light-orange;
    }

    &.icon-size-small {
        width: 14px;
        height: 14px;
    }

    &.icon-size-medium {
        width: 18px;
        height: 18px;
    }

    @include only_mini {
        @include skip_element;
    }
}

</style>

Как вы можете видеть, он импортирует другой компонент, используя псевдоним @: 

import(`@/assets/icons/${iconId}.svg`)

Это прекрасно работает в localhost: 3000 при просмотре приложения, но для Storybook (работает на порту 6006). выдает следующую ошибку: 

ERROR in ./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/assets/icons' in 'src/js/globalComponents'
ERROR in ./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js& (./node_modules/babel-loader/lib??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/js/globalComponents/SvgIcon.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '@/assets/icons' in 'src/js/globalComponents'

Внутри vue.config.js (в root) применяется псевдоним: 

configureWebpack: {
    resolve: {
        alias: require('./aliases.config').webpack
    },
...
}

И файл, на который он ссылается: ./aliases.config : 

const path = require('path')
function resolveSrc(_path) {
    return path.join(__dirname, _path)
}
const aliases = {
    '@': 'src',
    '@src': 'src'
}
module.exports = {
    webpack: {},
    jest: {}
}
for (const alias in aliases) {
    module.exports.webpack[alias] = resolveSrc(aliases[alias])
    module.exports.jest['^' + alias + '/(.*)$'] =
    '<rootDir>/' + aliases[alias] + '/$1'
}

Вот мой конфиг для сборника рассказов (.storybook/main.js): 

const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 
        {
          loader: 'sass-loader',
          options: {
            prependData: `@import "src/project/test/vars.scss"; @import "src/project/common/mixins.scss"; @import "src/styles/styles.scss";`
          }
        }
      ],
      resolve: {
        alias: {
          'vue$': 'vue/dist/vue.esm.js',
          '@': path.dirname(path.resolve(__dirname, "../src")),
        },
      },
      include: path.resolve(__dirname, '../'),
    });


    // Return the altered config
    return config;
  },
};

Кто-нибудь может увидеть, что я здесь не так делаю?

...