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

I have installed a package from this site:

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

import Chat from 'vue-beautiful-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?

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


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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.