How to solve this using ionic react and mongodb realm

I created a basic functionality but the realm has an error says that,

[plugin:vite:import-analysis] Failed to resolve entry for package “realm”. The package may have incorrect main/module/exports specified in its package.json: No known conditions for “.” specifier in “realm” package

This is my code using mongodb realm. I want to use the offline first architecture that can use CRUD offline and sync when back to online. Help me please.

import React, { useEffect, useState } from ‘react’;
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonLabel, IonInput, IonButton } from ‘@ionic/react’;
import Realm from ‘realm’;

export const TaskSchema = {
name: ‘Task’,
properties: {
_id: ‘objectId’,
task: ‘string?’,
},
primaryKey: ‘_id’,
};

const App: React.FC = () => {
const [realm, setRealm] = useState<Realm | null>(null);
const [tasks, setTasks] = useState<any>();
const [taskInput, setTaskInput] = useState(‘’);

const initRealm = async () => {
const app = new Realm.App({ id: ‘mongodbsync-ymnsn’ });
const user = await app.logIn(Realm.Credentials.anonymous());
const config = {
schema: [TaskSchema],
sync: {
user,
partitionValue: ‘public’,
},
};
const realmInstance = await Realm.open(config);
setRealm(realmInstance);
};

const addTask = async () => {
if (realm) {
realm.write(() => {
realm.create(‘Task’, { _id: new Realm.BSON.ObjectId(), task: taskInput });
});
setTaskInput(‘’);
}
};

const syncTasks = async () => {
if (realm) {
await realm.syncSession.uploadAllLocalChanges();
}
};

useEffect(() => {
if (!realm) {
initRealm();
} else {
const taskResults = realm.objects(‘Task’);
setTasks(taskResults);
}
}, [realm, tasks]);

return (



Ionic Realm App




{tasks.map((task) => (

{task.task}

))}


<IonInput placeholder=“New Task” value={taskInput} onIonChange={(e) => setTaskInput(e.detail.value!)} />
Add
Sync



);
};

export default App;