egoist / svg-to-vue-component

Transform SVG files into Vue SFC (with hot reloading and SVGO support)
MIT License
235 stars 18 forks source link

Module parse failed: Unexpected token #27

Open Xetatronics opened 5 years ago

Xetatronics commented 5 years ago

Hey.

thanks for this library! I get an webpack warning whenever i serve my project.

WARNING Compiled with 1 warnings warning in ./src/assets/logo.svg

Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. <?xml version="1.0" encoding="utf-8"?> | | <svg version="1.1" id="Ebene_3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

It does work when i move my .svg file to the public folder, but this seems like an ugly workaround. Here is my vue.config.js:

module.exports = {
    outputDir: process.env.DEPLOY_PATH,
    lintOnSave: true,
    chainWebpack: (config) => {
        config.plugins.delete('prefetch');

        /* The following is used by svg-to-vue-component */
        // Only convert .svg files that are imported by these files as Vue component
        const FILE_RE = /\.(vue|js|ts|svg)$/;

        // Use vue-cli's default rule for svg in non .vue .js .ts files
        config.module.rule('svg').issuer(file => !FILE_RE.test(file));

        // Use our loader to handle svg imported by other files
        config.module
          .rule('svg-component')
          .test(/\.svg$/)
          .issuer(file => FILE_RE.test(file))
          .use('vue')
          .loader('vue-loader')
          .end()
          .use('svg-to-vue-component')
          .loader('svg-to-vue-component/loader');
    }
}

I think this is somehow connected with the webpack bundling of svg files, but does anyone have a solution for this? Any ideas?

shmarts commented 5 years ago

Having the same issue!