Invalid Component Definition

[Allison Vorthmann]

I am trying to use the loader in a Laravel project and I keep getting an error of "Invalid Component Definition: route/filename.svg". I have Laravel Framework ^6.0 and vue@2.6.12 for this project. Any help would be appreciated! These are the rules I have in webpack.mix.js:

module.exports = {

    chainWebpack: (config) => {

        const svgRule = config.module.rule('svg');


        svgRule.uses.clear();


        svgRule

            .use('vue-svg-loader')

            .loader('vue-svg-loader')

            .options({

                svgo: {

                    plugins: [

                        {removeDoctype: true},

                        {removeComments: true},

                        {cleanupIDs: false},

                        {collapseGroups: false},

                        {removeEmptyContainers: false},

                        {removeUnusedNS: false},

                        {prefixIds: false}

                        ],

                },

            });
    
        },

};

[raffobaffo]

Anybody? Exact same problem here

[pomelo-alias]

two case：

1. webpack's version earlier than 5; you can remove svg in file-loader's rule
2. webpack 5 use Asset Modules type replaces those asset loader; so if you run vue inspect --rule svg will find these is a type in config, which is 'asset/resource'; then you can change it's value to 'javascript/auto'. for more detail you can check https://webpack.js.org/guides/asset-modules/

[Adam Alfredsson]

two case：

1. webpack's version earlier than 5; you can remove svg in file-loader's rule
2. webpack 5 use Asset Modules type replaces those asset loader; so if you run vue inspect --rule svg will find these is a type in config, which is 'asset/resource'; then you can change it's value to 'javascript/auto'. for more detail you can check https://webpack.js.org/guides/asset-modules/

Thanks! This is a working vue config:

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.type('javascript/auto');
    svgRule.uses.clear();
    svgRule.use('babel-loader').loader('babel-loader').end().use('vue-svg-loader').loader('vue-svg-loader');
  },
}