未捕获的类型错误：将 vue 升级到 3.x 后无法读取未定义的属性（读取“扩展”）

Question

Today I upgrade my google chrome extension vue version to 3.x, when run the app, the google chrome extension popup console shows error like this:

commons1.js:13392 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at Object../src/public/widget/index.js (commons1.js:13392)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/st.js (commons1.js:12725)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/app.js (commons1.js:12543)
    at __webpack_require__ (popup.js:23)
    at Object../src/popup/index.js (commons1.js:12687)
    at __webpack_require__ (popup.js:23)
    at popup.js:163
    at Function.__webpack_require__.O (popup.js:57)

I am searching from inte.net that knows that seems vue 3 did not support using extend to load third party component . what should I do to fix this problem? Is it possible using the vue 3 code to do the same thing as vue 2? how to tweak my vue 2 code? This is the vue 2 code with extend looks like:

export default Vue.extend( {
  template ,
  data : ()=>({})
})

Answer 1

In vue 3 there's no exported member called Vue , the right code that's equivalent for Vue.extend is:

import { defineComponent } from 'vue';

export default defineComponent({
  template ,
  data : ()=>({})
})

Answer 2

Do like the dumentation :

main.js:

import Vue from 'vue'
import App from './App.vue'

import vuetify from '@/plugins/vuetify' // path to vuetify export


Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App),
}).$mount('#app')

Create a file in src/plugins/vuetify.js with this:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Answer 3

If you got this error for toastr library this solution for u:

The same issue got resolved for me when i have imported jQuery before importing toastr library in my build json.

So please import toastr library after jQuery