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;
1 post - 1 participant
Read full topic
