Unable to resolve “realm/dist/bundle” from “RealmRealmSchema.js”

first time Realm user trying to set up a React Native app, getting the error above after trying to set subscriptions, previously getting; ”Cannot write to class Produit when no flexible sync subscription has been created”.

Problem happens after I tried:

import {Subscription} from 'realm/dist/bundle';

I did install the lastest version with; npm install [email protected], but I’m still getting the error.

Here’s my code:

const {UUID} = Realm.BSON;
import Realm, {BSON} from "realm";
import {useRealm, useQuery} from '@realm/react';
import {Subscription} from 'realm/dist/bundle';
import React, {useState} from 'react';
import {Text, FlatList, View, Pressable, TextInput, Button} from 'react-native';

class Produit extends Realm.Object {
    static schema = {
        name: 'Produit',
        properties: {
          _id: 'uuid',
          nom: {type: 'string', indexed: true},
          description: 'string',
          prix: 'string',
          image: 'string'
        },
        primaryKey: '_id',
    };
}

export default Produit;

export const Create = () => {
  const realm = useRealm();
  //const produits = useQuery(Produit);
  const [nomProduit, setNomProduit] = useState('');
  const [descProduit, setDescProduit] = useState('');
  const [prixProduit, setPrixProduit] = useState('');
  const [imgProduit, setImgProduit] = useState('');
  const addProduit = () => {
    realm.write(() => {
      realm.create(Produit, {
        _id: new UUID(),
        name: nomProduit,
        description: descProduit,
        prix: prixProduit,
        image: imgProduit
      });
    });
  };
  return (
    <View>
      <Text>Create</Text>
      <TextInput
        onChangeText={setNomProduit}
        value={nomProduit}
        placeholder="Produit name..."
      />
      <TextInput
        onChangeText={setDescProduit}
        value={descProduit}
        placeholder="description.."
      />
      <TextInput
        onChangeText={setPrixProduit}
        value={prixProduit}
        placeholder="prix..."
      />
      <TextInput
        onChangeText={setImgProduit}
        value={imgProduit}
        placeholder="img..."
      />
      <Button
        title="Add Produit"
        onPress={addProduit}
      />
    </View>
  );
};

This is where I am trying to use it:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Button } from 'react-native';
import React from 'react';
import { useEffect, useState } from 'react';
import { useApp, useRealm, AppProvider, UserProvider, RealmProvider} from '@realm/react';

import { Produit } from './Realm/RealmSchema.js';
import { Create } from './Realm/RealmSchema.js';

export default function App() {

  return (
    <AppProvider id={'application-pam2-ceyvopp'}>
    <UserProvider fallback={LogIn}>
      <RealmProvider
        schema={[Produit]}
        sync={{
          flexible: true,
          initialSubscriptions: {
            update(subs, realm) {
              subs.add(realm.objects(Produit));
            },
          },
        }}>
    <Create/>
    </RealmProvider>
    </UserProvider>
    </AppProvider>
  )
}

Thank you in advance!