'vue2: Uncaught TypeError: Cannot read properties of undefined (reading '_init')

[I have similar problem like this one but I didn't get to solve it.]

I'm using [email protected] and vue-custom-element to build custom web component.

Everything works fine when I build locally. However, I get error with npm run build command and after I add switched from javascript to typescript

app.d297e101.js:1 Uncaught TypeError: Cannot read properties of undefined (reading '_init')
at a (app.d297e101.js:1:120244)
at n.connectedCallback (app.d297e101.js:1:267209)
at n.f [as connectedCallback] (app.d297e101.js:1:261378)

My code before modification:

// main.ts
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;
 new Vue({
   render: (h) => h(App),
 }).$mount('#app');

// public/index.html

<body>
    ...
    <div id="app"></div> 
    <!-- built files will be auto injected -->
</body>

My code with vue-custom-element modification:

// main.ts
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;
 // new Vue({
 //   render: (h) => h(App),
 // }).$mount('#app');
 Vue.use(vueCustomElement);     
 Vue.customElement('vue-widget', App);


// public/index.html
<body>
    ...
    <!-- <div id="app"></div> -->
    <vue-widget />
</body>

Any idea ?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'vue2: Uncaught TypeError: Cannot read properties of undefined (reading '_init')

Sources

Related Questions