Fix 'Cannot read properties of undefined (reading 'observable')'

[chenphilip14]

I have installed a package from this site: https://www.npmjs.com/package/vue-beautiful-chat?activeTab=readme

and I want to incorporate it in my existing Vue3 project, but when I added this line:

import Chat from 'vue-beautiful-chat'
Vue.use(Chat)

to my main.js, I get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'observable')
    at Module.fb15 (vue-beautiful-chat.umd.min.js?124d:35:1)
    at t (vue-beautiful-chat.umd.min.js?124d:1:1)
    at 00ee (vue-beautiful-chat.umd.min.js?124d:1:1)
    at eval (vue-beautiful-chat.umd.min.js?124d:1:1)
    at eval (vue-beautiful-chat.umd.min.js?124d:1:1)
    at eval (vue-beautiful-chat.umd.min.js?124d:1:1)
    at ./node_modules/vue-beautiful-chat/dist/vue-beautiful-chat.umd.min.js (chunk-vendors.js:182:1)
    at __webpack_require__ (app.js:583:33)
    at fn (app.js:816:21)
    at eval (main.js:5:76)

How can I fix this?

[lpppsea9]

Hi, I have the same problem with you, have you solved this bug?

[James_Hibbard]

Hi,

@chenphilip14

my existing Vue3 project

I’m afraid the package you are using doesn’t support Vue 3.

There is a (rather minimal) issue requesting support for Vue 3, but the latest version of this package was published two and a half years ago, so I wouldn’t hold your breath.