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 internet 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 : ()=>({})
})
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 : ()=>({})
})
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)
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