[Vue warn]: Invalid Component definition

[pepelxD]

Good afternoon, I try to use the plugin, but I get an error Invalid Component definition. What could be the problem?
I do everything as described. I use vue cli 3. I changed the loader for svg in the file vue.config.js but this does not help ...
This is what the vue inspect command gives me https://yadi.sk/d/-frdPIPX5dSamA I don’t see there anything else that can interfere with the processing

[Shuunen]

Same here 😢

[WofWca]

What's the line where the error occurs and what gets imported?

[markhuot]

The problem for me was my webpack loader configuration. I'm using Storybook and the default webpack config includes an image loader that was catching my .svg files. The fix was to remove svg from the default image loader as described here: storybookjs/storybook#6758 (comment).

[antoniandre]

It did not work for me after copying exactly the Vue Cli code from https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs,

As I have both inline svg and external.

I was actually placing the inline keyword at the wrong place, it has to be that and not the opposite:

js

import Wave from '@/assets/file.svg?inline'

css

background: url('~@/assets/another-file.svg') bottom;

[bbugh]

If anyone ends up here trying to use this with Rails webpacker, you have to modify the webpacker-provided file loader to remove .svg.

// environment.js
const fileLoader = environment.loaders.get('file')
fileLoader.test = new RegExp(fileLoader.test.source.replace(/\|?\.svg/, ''), 'i')

[sebbean]

@bbugh you beautiful beautiful boy you just saved me an afternoon

@rafaelmonroy thank you!