Failed to mount component: template or render function not defined.

[igorkurochka]

Hi (again), sorry to bother you, but after I added your loader and put this code in my template

<img svg-inline svg-sprite class="icon icon-arrow-bottom-icon" src="@/assets/images/sale.svg" alt="svgicons"/>

I've got this warning in devtools console and my app stopped working (just plain whitescreen) "vue.esm.js?efeb:591 [Vue warn]: Failed to mount component: template or render function not defined."

the loader was added right after vue-loader

  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.vue$/,
        use: [
          "vue-loader",
          {
            loader: "vue-svg-inline-loader"
          },
        ]
      },
....

and the vueLoaderConfig is:

{
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

[oliverfindl]

Hello,

your webpack config should look like this:

module: {
    rules: [{
        test: /\.vue$/,
        use: [{
            loader: "vue-loader",
            options: vueLoaderConfig
        }, {
            loader: "vue-svg-inline-loader",
            options: { /* options */ }
        }]
    }, {
        /* another rule */
    }, {
        /* one more rule */
    }]
}

Try it and let me know if it works.

Thanks

[igorkurochka]

it works! thank you!

[mark-reason]

I'm having the same issue, my webpack config is:

module: { rules: [{ test: /\.vue$/, use: [ "vue-loader", { loader: "vue-svg-inline-loader", options: { svgo: { plugins: [{ removeDoctype: true }, { removeComments: true }, { cleanupIDs: false }] } } } ] }] }

[oliverfindl]

Hello,

I copied your rule into my project and it works without any errors. You have probably error somewhere else in webpack config.

Thanks

[mark-reason]

Hi Oliver

It's the only thing in my webpack config, the app was generated via the vue-cli and the code has been added to a vue.config.js file. Full file is here:

module.exports = { configureWebpack: { module: { rules: [{ test: /\.vue$/, use: [ "vue-loader", { loader: "vue-svg-inline-loader", options: { svgo: { plugins: [{ removeDoctype: true }, { removeComments: true }, { cleanupIDs: false }] } } } ] }] } } };

Cheers Mark

[oliverfindl]

Hello,

unfortunately I'm not using vue-cli. I'm using webpack instead. Please refer to vue-cli docs for webpack.

I'm sorry, I can't assist you with vue-cli issues, because it's out of my scope.

Thanks

[oliverfindl]

Hello guys,

finally got some spare time, so I updated readme file with usage snippets for webpack, vue-cli and nuxt based projects. Also I added examples for each one of those.

If you still have issues, please let me know.

Thanks

[mark-reason]

Thanks so much, works a treat!