Error in beforeMount hook: "Error: Please provide a component

[MmKargar]

"xmodal-vue": "^0.2.0"

"vue": "^2.6.11"

thanks for this pakcage.
i want to run simple example but its give this error in console :

the component path is true , but when i remove .default from end of component path the error solve but when i click on the button , nothing happen.

this is my code like your example :
html:

    <div id="introduce">
        <button @click="isModalOpen = !isModalOpen">open</button>
        <xmodal v-model="isModalOpen" :params="options" />
    </div>

introduction.js:

import Vue from "vue";
import xmodal from "xmodal-vue";
Vue.use(xmodal);

const introduce = new Vue({
  el: "#introduce",
  data: {
    isModalOpen: false,
    options: {
      component: require("./modal.vue").default,
      backgroundColor: "#000000",
      opacity: "0.7",
      mounted: this.modalOpen,
      destroyed: this.modalClose,
    },
  },
  methods: {
    modalOpen() {
      console.log("modal is mounted");
    },
    modalClose() {
      console.log("modals closed");
    },
  },
});

and this is the modal.vue :

<template>
    <div class="modal">test modal</div>
</template>

<script>
export default {}
</script>

<style scoped>
.modal {
    width: 500px;
    height: 300px;
    background: white;
    border-radius: 15px;
}
</style>

[mediv0]

hello, sorry for the late response
I am looking into it now

[mediv0]

there are two way for importing components

1. using import
2. using require

when we use the require keyword, since v13, vue-loader exports the component as the default key, we can access that component via .default ( if you using vue-cli )

component: require("./modal.vue").default,

i think in older versions you can require your component without using the .default keyword ( there is no default keyword in > 13v that's why you getting the error )

component: require("./modal.vue")

using import
for this method you need to import your modal first then assign it to the component property
like this:

<script>
import Vue from "vue";
import xmodal from "xmodal-vue";

// our modal
import modal from "./modal.vue";

Vue.use(xmodal);

export default {
    name: "App",
    data() {
        return {
            ismodalOpen: false,
            // basic modal options
            options: {
                component: modal,
                backgroundColor: "#000000",
                opacity: "0.7",
                animation: "scaleLeft",
            },
        };
    },
};
</script>

online demo: codesandbox

if you using require, can u please console log component property for me in beforeMount hook so I can check what is going on

beforeMount(){
      console.log(this.options.component);
}

thanks

[MmKargar]

dude your component is ok , it was my mistake that i figure it out just now , when test your solutions .
i just test it in simple blank page without .default key in require and it was ok
i think it should have confilict with other components that i used on that page because i test it without using .default key before and it just give me that error again so it should be Confilict.
Sorry , It was my bad , Thanks for taking the time .

[mediv0]

i will work on an alternative solution for import components. require is a little bit confusing

anyway have fun

[mediv0]

@Meti27 you can now directly use import like this:

component: import("./modal.vue"),

just update the package to 0.3.0 ( #10 )