adrianhajdin / figma_clone

Figma Clone using Next.js, Fabric.js and Liveblocks in TypeScript
https://jsmastery.pro
1k stars 259 forks source link

Got this Error unexpectedly. #11

Closed AbhigyanBorah closed 7 months ago

AbhigyanBorah commented 7 months ago

Screenshot 2024-02-26 171655

And this is my liveblocks.config.ts file:

import { LiveMap, createClient } from "@liveblocks/client"; import { createRoomContext } from "@liveblocks/react";

const client = createClient({ throttle: 16, publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!, });

// Presence represents the properties that exist on every user in the Room // and that will automatically be kept in sync. Accessible through the // user.presence property. Must be JSON-serializable. type Presence = { // cursor: { x: number, y: number } | null, // ... };

// Optionally, Storage represents the shared document that persists in the // Room, even after all users leave. Fields under Storage typically are // LiveList, LiveMap, LiveObject instances, for which updates are // automatically persisted and synced to all connected clients. type Storage = { // author: LiveObject<{ firstName: string, lastName: string }>, // ... canvasObjects: LiveMap<string, any>; };

// Optionally, UserMeta represents static/readonly metadata on each user, as // provided by your own custom auth back end (if used). Useful for data that // will not change during a session, like a user's name or avatar. type UserMeta = { // id?: string, // Accessible through user.id // info?: Json, // Accessible through user.info };

// Optionally, the type of custom events broadcast and listened to in this // room. Use a union for multiple events. Must be JSON-serializable. type RoomEvent = { // type: "NOTIFICATION", // ... };

// Optionally, when using Comments, ThreadMetadata represents metadata on // each thread. Can only contain booleans, strings, and numbers. export type ThreadMetadata = { resolved: boolean; zIndex: number; time?: number; x: number; y: number; };

export const { suspense: { RoomProvider, useRoom, useMyPresence, useUpdateMyPresence, useSelf, useOthers, useOthersMapped, useOthersConnectionIds, useOther, useBroadcastEvent, useEventListener, useErrorListener, useStorage, useObject, useMap, useList, useBatch, useHistory, useUndo, useRedo, useCanUndo, useCanRedo, useMutation, useStatus, useLostConnectionListener, useThreads, useUser, useCreateThread, useEditThreadMetadata, useCreateComment, useEditComment, useDeleteComment, useAddReaction, useRemoveReaction, }, } = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>( client, { async resolveUsers({ userIds }) { // Used only for Comments. Return a list of user information retrieved // from userIds. This info is used in comments, mentions etc.

  // const usersData = await __fetchUsersFromDB__(userIds);
  //
  // return usersData.map((userData) => ({
  //   name: userData.name,
  //   avatar: userData.avatar.src,
  // }));

  return [];
},
async resolveMentionSuggestions({ text, roomId }) {
  // Used only for Comments. Return a list of userIds that match `text`.
  // These userIds are used to create a mention list when typing in the
  // composer.
  //
  // For example when you type "@jo", `text` will be `"jo"`, and
  // you should to return an array with John and Joanna's userIds:
  // ["john@example.com", "joanna@example.com"]

  // const userIds = await __fetchAllUserIdsFromDB__(roomId);
  //
  // Return all userIds if no `text`
  // if (!text) {
  //   return userIds;
  // }
  //
  // Otherwise, filter userIds for the search `text` and return
  // return userIds.filter((userId) =>
  //   userId.toLowerCase().includes(text.toLowerCase())
  // );

  return [];
},

} );

Please help !!! @adrianhajdin

AbhigyanBorah commented 7 months ago

Solved it, I just had to move the codes inside createClient()

const client = createClient({
  throttle: 16,
  publicApiKey: process.env.NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY!,
  resolveUsers: async ({ userIds }) => {
   ....
    return [];
  },
  resolveMentionSuggestions: async ({ text, roomId }) => {
   ....
    return [];
  },
});

`