SyntaxError: "[object Object]" is not valid JSON

[Oleh-Semenenko]

Hi everyone. I use Nuxt3. When I go to the page with the vue-advanced-chat, I get this error:

SyntaxError: "[object Object]" is not valid JSON
at JSON.parse ()
at Proxy.castArray (vue-advanced-chat.js?v=2d499db9:35269:58)
at Proxy.roomsCasted (vue-advanced-chat.js?v=2d499db9:35162:19)
at ReactiveEffect.run (vue-advanced-chat.js?v=2d499db9:165:19)
at get value (vue-advanced-chat.js?v=2d499db9:826:35)
at Object.get [as roomsCasted] (vue-advanced-chat.js?v=2d499db9:2328:22)
at Object.get (vue-advanced-chat.js?v=2d499db9:2198:19)
at getter (vue-advanced-chat.js?v=2d499db9:2426:90)
at callWithErrorHandling (vue-advanced-chat.js?v=2d499db9:1012:32)
at getter (vue-advanced-chat.js?v=2d499db9:1503:22)

But when I refresh this page, everything works fine.

My code is:

<script setup lang="ts">
definePageMeta({
  ssr: false
});

const currentUserId = ref('1234');

const rooms = [
  {
    roomId: '1',
    roomName: 'Room 1',
    avatar: 'assets/imgs/people.png',
    unreadCount: 4,
    index: 3,
    lastMessage: {
      _id: 'xyz',
      content: 'Last message received',
      senderId: '1234',
      username: 'John Doe',
      timestamp: '10:20',
      saved: true,
      distributed: false,
      seen: false,
      new: true
    },
    users: [
      {
        _id: '1234',
        username: 'John Doe',
        avatar: 'assets/imgs/doe.png',
        status: {
          state: 'online',
          lastChanged: 'today, 14:30'
        }
      },
      {
        _id: '4321',
        username: 'John Snow',
        avatar: 'assets/imgs/snow.png',
        status: {
          state: 'offline',
          lastChanged: '14 July, 20:00'
        }
      }
    ],
    typingUsers: [4321]
  }
];
const messages = [
  {
    _id: '7890',
    indexId: 12092,
    content: 'Message 1',
    senderId: '1234',
    username: 'John Doe',
    avatar: 'assets/imgs/doe.png',
    date: '13 November',
    timestamp: '10:20',
    system: false,
    saved: true,
    distributed: true,
    seen: true,
    deleted: false,
    failure: true,
    disableActions: false,
    disableReactions: false,
    files: [
      {
        name: 'My File',
        size: 67351,
        type: 'png',
        audio: true,
        duration: 14.4,
        url: 'https://firebasestorage.googleapis.com/...',
        preview: 'data:image/png;base64,iVBORw0KGgoAA...',
        progress: 88
      }
    ],
    replyMessage: {
      content: 'Reply Message',
      senderId: '4321',
      files: [
        {
          name: 'My Replied File',
          size: 67351,
          type: 'png',
          audio: true,
          duration: 14.4,
          url: 'https://firebasestorage.googleapis.com/...',
          preview: 'data:image/png;base64,iVBORw0KGgoAA...'
        }
      ]
    }
  }
];
</script>

<template>
  <NuxtLayout name="chat">
    <vue-advanced-chat
      height="100%"
      :current-user-id="currentUserId"
      :rooms="rooms"
      :messages="messages"
      :rooms-loaded="true"
      :messages-loaded="true"
      :show-search="false"
      :show-add-room="false"
      :styles="{
        container: {
          borderRadius: '16px'
        }
      }"
    >
    </vue-advanced-chat>
  </NuxtLayout>
</template>

What is the problem it could be?

[nickiklein]

In your template, try JSON.stringify(..) for the JSON objects:

<vue-advanced-chat
      height="100%"
      :current-user-id="currentUserId"
      :rooms="JSON.stringify(rooms)"
      :messages="JSON.stringify(messages)"
      :rooms-loaded="true"
      :messages-loaded="true"
      :show-search="false"
      :show-add-room="false"
      :styles="{
        container: {
          borderRadius: '16px'
        }
      }"
    >
    </vue-advanced-chat>