Error: (0 , _liveblocks_react__WEBPACK_IMPORTED_MODULE_1__.createRoomContext) is not a function

Question

This error happened while generating the page. Any console logs will be displayed in the terminal window.

liveblocks.config.ts (151:2) @ client

149 | // RoomEvent, 150 | // ThreadMetadata

151 | >(client); |^ 152 | 153 | // Project-level hooks, use inside LiveblocksProvider 154 | export const {

Code for page.tsx

import React from 'react';
import { LiveList, LiveMap, LiveObject } from "@liveblocks/client";
import { RoomProvider } from "../../liveblocks.config";
import { useRoom } from "../../liveblocks.config";

export function Home() {
  const room = useRoom();
  
  return (
    <RoomProvider
      id="my-room"
      // 😎 Replace with your own data!
      initialPresence={{ cursor: { x: 0, y: 0 } }}
      // 😎 Replace with your own data!
      initialStorage={() => ({
        animals: new LiveList(["🦁", "🦊", "🐵"]),

        mathematician: new LiveObject({
          firstName: "Ada",
          lastName: "Lovelace",
        }),

        fruitsByName: new LiveMap([
          ["apple", "🍎"],
          ["banana", "🍌"],
          ["cherry", "🍒"],
        ]),
      })}
    >
      {/* children */}
    </RoomProvider>
  );
}

export default Home;

code for liveblock.config.ts

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

  
const client = createClient({
  publicApiKey: "pk_dev_QOuLYZk8x2q607prkVLnSLJKf_eHwZfl87DGUAPkJEy8uM8h_y-REaWw3GLTkNcq",
  // authEndpoint: "/api/liveblocks-auth",
  // throttle: 100,
  async resolveUsers({ userIds }) {
    // Used only for Comments and Notifications. 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 }) {
    // 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 users = await getUsers({ search: text });
    // return users.map((user) => user.id);

    return [];
  },
  async resolveRoomsInfo({ roomIds }) {
    // Used only for Comments and Notifications. Return a list of room information
    // retrieved from `roomIds`.
    
    // const roomsData = await __fetchRoomsFromDB__(roomIds);
    // 
    // return roomsData.map((roomData) => ({
    //   name: roomData.name,
    //   url: roomData.url,
    // }));
    
    return [];
  },
});

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

// type User = {
//   id: string;
  
//   // Example, use any JSON-compatible data in your metadata
//   info: {
//     name: string;
//     avatar: string;
//     colors: string[];
//   }
// }

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

// Room-level hooks, use inside `RoomProvider`
export const {
  suspense: {
    RoomProvider,
    useRoom,
    useMyPresence,
    useUpdateMyPresence,
    useSelf,
    useOthers,
    useOthersMapped,
    useOthersListener,
    useOthersConnectionIds,
    useOther,
    useBroadcastEvent,
    useEventListener,
    useErrorListener,
    useStorage,
    useBatch,
    useHistory,
    useUndo,
    useRedo,
    useCanUndo,
    useCanRedo,
    useMutation,
    useStatus,
    useLostConnectionListener,
    useThreads,
    useCreateThread,
    useEditThreadMetadata,
    useCreateComment,
    useEditComment,
    useDeleteComment,
    useAddReaction,
    useRemoveReaction,
    useThreadSubscription,
    useMarkThreadAsRead,
    useRoomNotificationSettings,
    useUpdateRoomNotificationSettings,
  
    // These hooks can be exported from either context
    // useUser,
    // useRoomInfo
  }
} = createRoomContext<
  Presence, 
  Storage
  // UserMeta, 
  // RoomEvent, 
  // ThreadMetadata
>(client);

This is my first time using Liveblocks, and I'm not sure what steps to take. I would really appreciate it if you could help me with this.

I hope someone can tell me how to fix it