I'm Working with liveblocks in my next application. While creating rooms in my components I'm getting an error

Question

Server Error TypeError: (0 , liveblocks_react__WEBPACK_IMPORTED_MODULE_1_.default) is not a function

This error happened while generating the page. Any console logs will be displayed in the terminal window. Source liveblocks.config.ts (85:78) @ client

83 | useRemoveReaction, 84 | }

85 | } = createRoomContext<Presence, Storage, UserMeta, RoomEvent, ThreadMetadata>(client, { | ^ 86 | async resolveUsers({ userIds }) { 87 | // Used only for Comments. Return a list of user information retrieved 88 | // from userIds. This info is used in comments, mentions etc.

Code for room.tsx

import  {ReactNode} from 'react';
import  {ClientSideSuspense} from '@liveblocks/react'

import  {RoomProvider}  from '@/liveblocks.config';

interface RoomProps { 
  children: ReactNode
  roomId: string;
  fallback: NonNullable<ReactNode> | null;
};
const Room = ({ 
  children,
  roomId,
  fallback,
}: RoomProps) => {
  return (
    <RoomProvider 
    id={roomId} 
    initialPresence={
      {}
    }
    // initialStorage={{
    //   layers: new LiveMap<string, LiveObject<Layer>>(),
    //   layerIds: new LiveList(),
    // }}
  >
    <ClientSideSuspense fallback={fallback}>
      {() => children}
    </ClientSideSuspense>
  </RoomProvider>
    )
}


export default Room

code for page.tsx

import React from 'react'
import Canvas from  './_components/canvas'
import Room from '@/components/room';
import SimpleLoader from '@/components/Loaders/simple-loader';

interface BoardIdPageProps {
    params: {
      boardId: string;
    };
  };
  
  const BoardIdPage = ({
    params,
  }: BoardIdPageProps) => {  
  return (
    <main
      className="h-full w-full relative bg-neutral-100 touch-none"
    >
      <Room roomId={params.boardId} fallback={<SimpleLoader />}> 
        <Canvas boardId={params.boardId} />
      </Room>
        
    </main>
  )
}

export default BoardIdPage

code for liveblock.config.ts

import { createClient } from "@liveblocks/client";
import { createRoomContext } from "@liveblocks/react";
  
const client = createClient({
  publicApiKey: "pk_dev_Mlm5l54BhELjDRrhRrvlbBAih9GS5wCPSTLaXLeBXZpiDI7Cw_BCNyURhNuTEtvt",  
});

// 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 }>,
  // ...
};

// 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;
  // quote: string;
  // time: 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:
    // ["[email protected]", "[email protected]"]
    
    // 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 [];
  },
});

Answer 1

Liveblocks is trying to render on the server side which caused this error.

Try to add

"use client"

on top of the room.tsx file. It will specify room.tsx as client component.