Skip to content

Module parse failed: Unexpected token #27

@Xetatronics

Description

@Xetatronics

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.

|
| <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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions