SVG loading vue-svg-loader; [Vue warn]: Invalid Component definition

132

02 января 2021, 15:50

При попытке использования vue-svg-loader получаю:

[Vue warn]: Invalid Component definition: /img/fire.0f28c25a.svg

Проект сделан с использованием vue cli 3, согласно документации лоадера сделал следующее:

установил npm i -D vue-svg-loader
в файл vue.config.js добавил запись:

    chainWebpack: (config) => {
      const svgRule = config.module.rule('svg');
      svgRule.uses.clear();
      svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
    }

импортирую файл svg и использую его как компонент:

<template>
  <Icon />
</template>
import Icon from '@/assets/img/fire.svg'
export default {
  name: 'app-icon',
  components: {
    Icon
  }
}

Пересмотрел много постов на эту тему в том числе и этот https://stackoverflow.com/questions/49904540/svg-loading-vue-svg-loader-vue-warn-invalid-component-definition Однако добиться нужного результата та и не вышло

UPD: команда vue inspect показывает такое правило для svg:

/* config.module.rule('svg') */
      {
        test: /\.(svg)(\?.*)?$/,
        use: [
          /* config.module.rule('svg').use('vue-svg-loader') */
          {
            loader: 'vue-svg-loader'
          }
        ]
      }

Answer 1

Я нашёл вот такое описание подключения лоадера. В вашем же варианте я не вижу регулярки, по которой вебпак будет искать свгшки. Вот тут, если что, видел.

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  },
};

Answer 2

В общем проблема решилась сама собой, точнее лоадер не работал из - за того, что конфиг вебпака во vue cli динамический и собирается во время запуска (npm run serve/npm run build). Я же пробовал изменить конфиг не вырубая девсервера.