Error while working with createRoomContext in next js application.

[Sanskar-tyagi]

Hey!

I'm working on a next.js application and I have been trying to integrate rooms into my app.

Error : Server Error
TypeError: (0 , liveblocks_react__WEBPACK_IMPORTED_MODULE_1_.createRoomContext) 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.
Show collapsed frames

liveblock.config.js

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

const client = createClient({
publicApiKey: "p--------------------------------------------------------------------t",
});

// 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 = {
};

type UserMeta = {
};

type RoomEvent = {
};
export type ThreadMetadata = {
};

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 }) {

return [];

},
async resolveMentionSuggestions({ text, roomId }) {
return [];
},
});

room.tsx :

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

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

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

<ClientSideSuspense fallback={fallback}>
  {() => children}
</ClientSideSuspense>

) }

export default Room

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 (

<Room roomId={params.boardId} fallback={}>

</main>

)
}

export default BoardIdPage