Vue 3 : Receiving "r.default is not a constructor" error while using Vue Material

Question

I am working on Vue3 project with vue-material library. But after using the vue-material library I am receiving the following error r.default is not a constructor. I traced it back and found that its coming from ./node_module/vue-material/dist/components/index.js. I have no idea what I am doing wrong. My main.js file code is as follows

import {createApp,} from 'vue'
import { MdButton} from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
import App from './App.vue'

const app = createApp(App)
app.use(MdButton)
app.mount("#app");

I tried every possible combination as I could.

Furthermore, if I remove the second import import { MdButton} from 'vue-material/dist/components' and the line app.use(MdButton). Everything is working as expected just that vue-material, I guess, only causing the problem. I did some research on the topic and found this https://github.com/vuematerial/vue-material/issues/312 but have no idea how to use it.

I will appreciate your help on this issue?

Answer 1

I tried as well. But isnt working with Vue3.

You have to use Vue2. As also explained in their docs "Vue Material Documentation assumes that you are comfortable with Vue.js 2.5+. If you are new to Vue.js, it might not be the best idea to learn from here as your first step - grasp the basics then come back. The Vue.js website is the greatest documentation source for you to start with."

https://vuematerial.io/getting-started/