requestAnimationFrame is not defined

[bogdansmadici]

Describe the bug

I've installed this module two days ago, everything was clear until this morning. Last night I just tried to add some style in the component like in your description and everything was ok, I did not encounter a single problem until this morning. I just started the server and some issues were found. Also I tried to reinstall the component, restart the server but nothing happened.

Screenshots

Even if the first ReferenceError is that "requestAnimationFrame is not defined", I searched the file and the "missing part" is right there.

Device (please complete the following information)

I am using Safari, MacBook Pro

Here is the chat.vue file where you can find the source code:

<template>
    <dashboard-content>
        <template slot="header">
            <!-- Navbar desktop, partially mobile START -->
            <div
                class="
                flex flex-col
                lg:flex-row lg:items-center lg:justify-between
                pb-6
                gap-y-4
                md:gap-y-6
                pt-6
                md:pt-0
                px-4
                md:px-0
                "
            >
                <div class="font-black text-2xl leading-7">
                    Chat
                </div>
                <div class="flex items-center gap-x-6">
                    <search />
                    <t-button
                        variant="redShadow"
                        class="hidden md:flex items-center gap-x-2 flex-shrink-0"
                        @click="$router.push('/intelectual/videos/create')"
                    >
                        <icon-new-video class="w-6 h-6" behavior="white"></icon-new-video>
                        {{ $t('general.createVideoButton') }}
                    </t-button>
                </div>
            </div>
            <!-- Navbar desktop, partially mobile END -->
        </template>
        <template slot="content">
            <chat-window
                :current-user-id="currentUserId"
                :messages="messages"
                :rooms="loadedRooms"
                @send-message="sendMessage"
                @fetch-messages="fetchMessages"
                :messages-loaded="messagesLoaded"
                :loading-rooms="loadingRooms"
                @fetch-more-rooms="fetchMoreRooms"
                :show-search="false"
                :rooms-loaded="roomsLoaded"
                :show-audio="false"
                :styles="{
                    general: {
                        color: '#0a0a0a',
                        colorSpinner: '#333',
                        borderStyle: '1px solid #e1e4e8',
                        backgroundInput: 'rgba(37, 29, 29, 0.05)',
                    },

                    footer: {
                        background: '#ffffff',
                        backgroundReply: 'rgba(0, 0, 0, 0.08)'
                    },

                    icons: {
                        send: '#E02020',
                        emoji: '#251D1D',
                        paperclip: '#251D1D'
                    },
                    message: {
                        colorNewMessages: '#E02020',
                        backgroundMe: '#E02020',
                        color: '#ffffff',
                        background: 'rgba(37, 29, 29, 0.4)'
                    },
                    
                }"
                :text-messages="{
                    TYPE_MESSAGE: 'Scrie mesajul aici...',
                }"
                
            />
            
        </template>
    </dashboard-content>
</template>

<script>
import dashboardContent from "../../components/website/dashboard-content.vue";
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'
export default {
    name: "IntelectualChat",
    layout: "dashboard",
    components: {
        dashboardContent,
        ChatWindow
    },
    data() {
        return {
            messagesLoaded: false,
            loadingRooms: true,
            roomsLoaded: false,
            pageTitle: "Chat",
            rooms: [],
            messages: [],
            currentUserId: 1234,
        }
    },
    methods: {        
        fetchMoreRooms() {
            this.rooms = [
                {
                    roomId: 1,
                    roomName: 'Room 11111',
                    avatar: 'https://cdn4.vectorstock.com/i/1000x1000/44/73/boy-avatar-in-round-web-button-isolated-on-white-vector-20694473.jpg',
                    unreadCount: 4,
                    index: 3,
                    lastMessage: {
                        content: 'Last message received',
                        senderId: 1234,
                        username: 'Bogdan23',
                        timestamp: '10:20',
                        saved: true,
                        distributed: false,
                        seen: false,
                        new: true
                    },
                    users: [
                    {
                        _id: 1234,
                        username: 'Bogdan',
                        avatar: 'https://c8.alamy.com/comp/T1H6HA/cartoon-round-avatar-picture-vector-art-illustration-T1H6HA.jpg',
                    },
                    {
                        _id: 4321,
                        username: 'Stefan',
                        avatar: 'https://cdn4.vectorstock.com/i/1000x1000/44/73/boy-avatar-in-round-web-button-isolated-on-white-vector-20694473.jpg',
                    }
                    ],
                },
                {
                    roomId: 2,
                    roomName: 'Roooom2',
                    avatar: 'https://cdn4.vectorstock.com/i/1000x1000/44/73/boy-avatar-in-round-web-button-isolated-on-white-vector-20694473.jpg',
                    unreadCount: 2,
                    index: 4,
                    lastMessage: {
                        content: 'Last message received',
                        senderId: 1234,
                        username: 'Bogdan',
                        timestamp: '10:22',
                        saved: true,
                        distributed: false,
                        seen: false,
                        new: true
                    },
                    users: [
                    {
                        _id: 1234,
                        username: 'Bogdan',
                        avatar: 'https://c8.alamy.com/comp/T1H6HA/cartoon-round-avatar-picture-vector-art-illustration-T1H6HA.jpg',
                    },
                    {
                        _id: 4322,
                        username: 'Stefan2',
                        avatar: 'https://cdn4.vectorstock.com/i/1000x1000/44/73/boy-avatar-in-round-web-button-isolated-on-white-vector-20694473.jpg',
                    }
                    ],
                    
                }
            ];
            if (!this.rooms.length) {
                this.loadingRooms = false;
                this.roomsLoaded = true;
            }
        },

        fetchMessages({room}) {
            this.messages=[
                {
                    _id: 7891,
                    indexId: 12091,
                    content: 'Nam interdum tincidunt consectetur. Ut sed erat ullamcorper, ultricies urna vel, semper ipsum. Curabitur eget sem a velit dignissim ultrices eget vitae velit.',
                    senderId: 1234,
                    username: 'Bogdan',
                    avatar: 'https://c8.alamy.com/comp/T1H6HA/cartoon-round-avatar-picture-vector-art-illustration-T1H6HA.jpg',
                    date: '13 November',
                    timestamp: '10:20',
                    system: false,
                    saved: true,
                    distributed: true,
                    seen: true,
                    deleted: false,
                    disableActions: false,
                    disableReactions: false,
                    files: [
                        {
                            name: 'My File',
                            size: 67351,
                            type: 'png',
                            audio: true,
                            duration: 14.4,
                            url: 'https://www.pixsy.com/wp-content/uploads/2021/04/ben-sweet-2LowviVHZ-E-unsplash-1.jpeg',
                            preview: 'data:image/png;base64,iVBORw0KGgoAA...'
                        }
                    ],
                },
                {
                    _id: 7892,
                    indexId: 12093,
                    content: 'Nam interdum tincidunt consectetur. Ut sed erat ullamcorper, ultricies urna vel, semper ipsum. Curabitur eget sem a velit dignissim ultrices eget vitae velit.',
                    senderId: 4321,
                    username: 'Bogdan2',
                    avatar: 'https://cdn4.vectorstock.com/i/1000x1000/44/73/boy-avatar-in-round-web-button-isolated-on-white-vector-20694473.jpg',
                    date: '13 November',
                    timestamp: '10:20',
                    system: false,
                    saved: true,
                    distributed: true,
                    seen: false,
                    deleted: false,
                    disableActions: false,
                    disableReactions: false,
                    files: [
                        {
                            name: 'My File',
                            size: 67351,
                            type: 'png',
                            audio: true,
                            duration: 14.4,
                            url: 'https://static.remove.bg/remove-bg-web/dc31eaf79444b51662da45dcd6cf26fcda20b5dd/assets/start-1abfb4fe2980eabfbbaaa4365a0692539f7cd2725f324f904565a9a744f8e214.jpg',
                            preview: 'data:image/png;base64,iVBORw0KGgoAA...'
                        }
                    ],
                    replyMessage: {
                    content: 'Reply Messages',
                    senderId: 4322,
                    files: [
                        {
                            name: 'My Replied File2',
                            size: 67351,
                            type: 'png',
                            audio: true,
                            duration: 14.4,
                            url: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
                            preview: 'data:image/png;base64,iVBORw0KGgoAA...'
                        }
                    ]
                    },
                }
            ];
            this.messagesLoaded = true
        }
    },
    computed: {
        
        loadedRooms() {
            return this.rooms;
        }
    },

    mounted() {
        this.fetchMoreRooms();
    }
}
</script>

<style scoped>

</style>

[bogdansmadici]

Please CLOSE this Issue. Was something from our server regarding to SSR. Thank you!

[kalnode]

I have this error if I do regular import inside a Vue component.
VAC seems to work if I bring it in as a global.
For context, I'm using the Nuxt framework.

**FAILS (preferred): **
I include it normally like any other Vue component. I get same error as op.
As per documentation here:
https://github.com/antoine92190/vue-advanced-chat#usage

The error seems to come directly from import ChatWindow from 'vue-advanced-chat', as deleting all other lines does not clear the error. Deleting the import finally clears the error.

<template>
  <chat-window
    :current-user-id="currentUserId"
    :rooms="rooms"
    :messages="messages"
  />
</template>

<script>
  import ChatWindow from 'vue-advanced-chat'
  import 'vue-advanced-chat/dist/vue-advanced-chat.css'

  export default {
    components: {
      ChatWindow
    },
    data() {
      return {
        rooms: [],
        messages: [],
        currentUserId: 1234
      }
    }
  }
</script>

WORKS (not preferred):
If I include this as a global plugin (Nuxt), VAC seems to work.

(example) plugins/chatFrontEnd.client.js

import Vue from 'vue'
import ChatWindow from 'vue-advanced-chat'
import 'vue-advanced-chat/dist/vue-advanced-chat.css'
Vue.component('chat-window', ChatWindow)

Then in any Vue component:

  <chat-window
    :current-user-id="currentUserId"
    :rooms="rooms"
    :messages="messages"
  />

[wingzzzz]

Please CLOSE this Issue. Was something from our server regarding to SSR. Thank you!

How do you solve this problem, please? It makes me almost crazy!