无法安装组件：模板或渲染函数未定义-使用Laravel-mix时出现vue警告

Question

The problem

I created the frontend of a project in Vue2. I used a plugin called 'vue-svg-inline-loader' to convert my svg images to inline svg code. In order to get the script to work I had to add this config code to my vue.config.js.

The team has now implemented the frontend on the backend (Laravel) using Laravel-mix. This broke my "vue-svg-inline-loader" as it does not have the config anymore to figure out what to target.

Code that I've tried

I read a lot of questions and answers on StackOverflow but this kind of configuration seem so vast I cannot seem to put my finger on how shoul I write it. I believe that from my attempt, I am missing the rule(vue) from my previous file and the use("vue-svg-inline-loader") which was pointing to the plugin.

My previous vue.config.js which was working

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/css/all.scss";`
            }
        }
    },
    chainWebpack: config => {
        config.module
            .rule("vue")
            .use("vue-svg-inline-loader")
                .loader("vue-svg-inline-loader")
                .options({ /* ... */ });
    }
}

My attempt at webpack.mix.js

mix.webpackConfig({
    module : {
        rules : [
            'vue',
            {
                use : [
                    'vue-svg-inline-loader',
                    {
                        loader: 'vue-svg-inline-loader',
                        options : {}
                    },
                ]
            },
        ]
    },
});

Updates

Update 26 Aug: I managed to get in touch with the dev of vue-svg-inline-loader. We worked on some leads and managed to get to this:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .webpackConfig({
        module: {
            rules: [
                {
                    use: [
                        {
                            loader: "vue-svg-inline-loader",
                            options: {
                                    inline: {
                                        keyword: "svg-inline",
                                        strict: true
                                    }
                            }
                        }
                    ]
                }
            ]
        }
    });

With this it loads all the SVGs properly but it does not load any img that uses an image in a different format than SVG. I thought it's a rule or a test problem, therefore I added test: /\\.vue$/, . With this I encountered errors of missing vue-loader so I added vue-loader as well. With vue-loader declared, the code compiled. When I accessed the app only a blank page returned along with the following console error: [Vue warn]: Failed to mount component: template or render function not defined.

The final, not working code looks like:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: [
                        {
                            loader: "vue-loader",
                            options: { /* ... */ }
                        },
                        {
                            loader: "vue-svg-inline-loader",
                            options: {
                                    inline: {
                                        keyword: "svg-inline",
                                        strict: true
                                    }
                            }
                        }
                    ]
                }
            ]
        }
    });

Answer 1

Managed to get to a solution along with the Laravel Mix team. I have also informed the developer of vue-svg-inline-loader and this solution should be now featured in their documentation.

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copy('resources/assets', 'public/assets', true)
    .override(config => {
        config.module.rules.push({
            test: /\.vue$/,
            use: [{ loader: 'vue-svg-inline-loader' }]
        })
    });