[Vue warn]: Failed to mount component: template or render function not defined.

[amangup]

Getting the above error when my app is trying to render a template which uses the MagicGrid component.

Here is the .vue file where MagicGrid is used:

<template>
    <div>
        <h2> {{ gallery.title }} </h2>
        <magic-grid>
            <Thumbnail v-for="(img_url, index) in gallery.images" :key="index" :img_url="img_url" :size_px="size_px" />
        </magic-grid>

    </div>
</template>

<script>
    import Vue from 'vue'
    import MagicGrid from 'vue-magic-grid'
    import Thumbnail from './Thumbnail.vue'

    Vue.use(MagicGrid)

    export default {
        name: "Gallery",
        components: {
            MagicGrid,
            Thumbnail
        },
        props: {
            gallery: Object,
            size_px: Number
        }
    }
</script>

<style scoped>
</style>

The full error is this:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <MagicGrid>
       <Gallery> at src/components/Gallery.vue
         <App> at src/App.vue
           <Root>

Thumbnail is a custom component I've written and it is working when I remove the MagicGrid from my template and render it directly.

I'm using webpack, and here is the webpack config:

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: ['./src/main.js'],
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
             filename: './index.html',
             template: 'index.html',
             inject: true
        })
    ]
};

Can you help me debug why this might be happening? Thanks in advance!