使用导入功能时未定义ModalRight

Question

我正在使用webpack将我的所有文件捆绑在一起，但是我在尝试导入我使用默认名称创建的模板组件时遇到问题，我不断获取ModalRight is not defined。

这是我的App.js文件，我将其作为webpack.config.js中的条目引用

import Vue from '../../public-assets/js/vue/vue.js';
import ModalRight from '../../public-assets/js/vue/components/ModalRightSlide.vue';

window.Vue = Vue;

在我的基本文件中，我试图像这样调用它：

var app = new Vue({
    el: '#app',
    data: {

    },
    components: {
        ModalRight
    },
});

我还尝试在html中使用Vue.component('modal', ModalRight );和<modal></modal>的其他页面，但我得到了这个错误。

这是 ModalRightSlide.vue 文件

<template>
    <div>
        foobar
    </div>
</template>

<script>
    export default {

    }
</script>