Vue-svg-loader: Invalid Component definition

[nathanaelphilip]

Hi! Thanks for putting this together :)

I’m getting a Invalid Component definition: error when trying to load in an SVG.

This is how I’ve set it up in the component:

<script>
    import Icon from '../assets/icons/logo.svg'

    export default {
        components: {
            Icon
        }
    }
</script>

This is the webpack 1.x config loaders:

loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      {
          test: /\.svg$/,
          loader: 'vue-svg',
      }

Does the SVG need to be set up a certain way? Let me know if you need anything else to help debug.

Thanks again!

[nathanaelphilip]

It seems like it could be an issue with the SVG icon itself – is there a specific way to export it?

[visualfanatic]

I'm super glad that somebody beside me is using this package! Could you share the SVG file you are trying to use?

[nathanaelphilip]

Sure!

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Isolation_Mode" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" viewBox="0 0 98.9 99" style="enable-background:new 0 0 98.9 99;" xml:space="preserve">
<g>

        <rect x="73.8" y="0" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 154.2789 6.6)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="55.4" y="0" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 117.3592 6.6)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="55.4" y="18.6" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 117.3592 43.7115)" style="fill:#6656EB;" width="6.6" height="6.6"/>
    <rect x="0" y="0" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 6.6 6.6)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="0" y="37" transform="matrix(-1 -4.519908e-11 4.519908e-11 -1 6.6 80.6312)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="0" y="18.6" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 6.6 43.7115)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="18.5" y="0" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 43.5197 6.6)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="18.5" y="18.6" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 43.5197 43.7115)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="36.9" y="0" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 80.4395 6.6)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="36.9" y="18.6" transform="matrix(-1 -4.492374e-11 4.492374e-11 -1 80.4395 43.7115)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="36.9" y="92.4" transform="matrix(-1 -4.464796e-11 4.464796e-11 -1 80.4395 191.3904)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="18.5" y="92.4" transform="matrix(-1 -4.464796e-11 4.464796e-11 -1 43.5197 191.3904)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="36.9" y="73.9" transform="matrix(-1 -4.519908e-11 4.519908e-11 -1 80.4395 154.4707)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="18.5" y="73.9" transform="matrix(-1 -4.519908e-11 4.519908e-11 -1 43.5197 154.4707)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="92.3" y="92.4" transform="matrix(-4.395880e-11 1 -1 -4.395880e-11 191.334 5.642185e-02)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="92.3" y="73.9" transform="matrix(-4.395880e-11 1 -1 -4.395880e-11 172.8741 -18.4034)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="73.8" y="73.9" transform="matrix(-4.395880e-11 1 -1 -4.395880e-11 154.3748 9.589611e-02)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="73.8" y="92.4" transform="matrix(-4.395880e-11 1 -1 -4.395880e-11 172.8347 18.5558)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="92.3" y="55.4" transform="matrix(-4.395880e-11 1 -1 -4.395880e-11 154.3393 -36.9383)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="55.4" y="92.4" transform="matrix(-4.547492e-11 1 -1 -4.547492e-11 154.3748 37.0156)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="55.4" y="73.9" transform="matrix(-4.547492e-11 1 -1 -4.547492e-11 135.9149 18.5558)" style="fill:#6656EB;" width="6.6" height="6.6"/>

        <rect x="73.8" y="18.6" transform="matrix(-4.547492e-11 1 -1 -4.547492e-11 98.9952 -55.2837)" style="fill:#6656EB;" width="6.6" height="6.6"/>
</g>
</svg>

[nathanaelphilip]

I also found this: https://github.com/tcoopman/image-webpack-loader/issues/14
I’m not sure if that relates to this issue. I didn’t see anything that corresponded to my set up, but he was getting the same error.

I’m using the vue-cli to generate the webpack config – if that helps.

[visualfanatic]

Okay, I see the problem, just remove svg from this test property: /\.(png|jpe?g|gif|svg)(\?.*)?$/.

[nathanaelphilip]

yay!

[nathanaelphilip]

thank you :)

[nathanaelphilip]

Also, i had my .svg in assets/icons folder, I think moving them to assets/img and I think that helped too. Thanks again – this is a life saver.

[19WAS85]

It's not working to me, I needed a different approach in the last vue/webpack versions.

Add the following into vue.config.js:

module.exports = {
  chainWebpack: config => {
    config.module.rules.delete("svg");
  },
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.svg$/, 
          loader: 'vue-svg-loader', 
        },
      ],
    }      
  }
};

Source: https://stackoverflow.com/questions/49904540/svg-loading-vue-svg-loader-vue-warn-invalid-component-definition

[visualfanatic]

@19WAS85 Vue CLI by default uses file-loader for the SVG files, you can easily replace it:

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('svg')
      .use('file-loader')
      .loader('vue-svg-loader')
  }
}