Android: Setting recoil state yields "ownKeys target is non-extensible but trap result keys differ from target keys" on v12

[mattlewer]

How frequently does the bug occur?

Always

Description

TypeError: ownKeys target is non-extensible but trap result keys differ from target keys

I am receiving this error when attempting to store a Realm object into Recoil state.

This has been working well however after upgrading to anything >12.0.0, this occurs. Within the breaking changes there is mention of a related change:

The new SDK wraps its accessor objects in a Proxy trapping the ownKeys operation which enables calls to the standard Object.keys(obj) and the spread operator {...obj} to work correctly, with minimal performance impact on normal accesses. 

Is there somewhere we can view how to handle these breaking changes as I'm at a bit of a loss?

Stacktrace & log output

No response

Can you reproduce the bug?

Always

Reproduction Steps

'../interfaces/models/Session':

import 'react-native-get-random-values';
import {Realm} from '@realm/react';
import User from './User';
import idGenerator from '../../services/idGenerator';

export default class Session extends Realm.Object {
  client_id!: string;
  user!: User;
  token!: string;
  device_name!: string;

  static create(user: User, token: string, deviceName: string): Object {
    return {
      device_name: deviceName,
      token: token,
      user: user,
    };
  }

  static schema: Realm.ObjectSchema = {
    name: 'Session',
    primaryKey: 'client_id',
    properties: {
      client_id: {type: 'string', default: () => idGenerator.generate()},
      user: 'User',
      token: 'string',
      device_name: 'string',
    },
  };
}

How I am using the Recoil State:

import {atom, selector} from 'recoil';
import Session from '../interfaces/models/Session';

export const sessionState = atom<(Session & Realm.Object) | undefined>({
  key: 'session',
  default: undefined,
});

export const sessionValue = selector({
  key: 'sessionValue',
  get: ({get}) => ({
    isAuthenticated: get(sessionState) != null,
    user: get(sessionState)?.user,
    token: get(sessionState)?.token,
  }),
});

Getting the session:

  const getAll = () => {
    return Array.from(realm.objects<Session>(type));
  };

Setting the session to recoil:

const [sessionValue, setSessionValue] = useRecoilState(sessionState);

  const setRecoilSession = (session: Session) => {
    try {
      setSessionValue(session);
    } catch (e) {
      // TypeError: ownKeys target is non-extensible but trap result keys differ from target keys
      console.log(e);
    }
  };

The error then occurs when I obtain the session from the DB and try to set the state of recoil to this.

Version

12.0.0, 12.5.0

What services are you using?

Local Database only

Are you using encryption?

No

Platform OS and version(s)

Android

Build environment

No response

Cocoapods version

No response

[kraenhansen]

Thanks for reporting the issue and providing source-code to help us reproduce it!
While I haven't verified the bug myself, this does seem like a use-case that we'd like to support, although we don't explicitly test for it.

Are you explicitly mentioning Android, because this doesn't occur on iOS or is it simply because that's the only platform you've tested on? If the latter is the case, I'd like to update the title to be more precise - for example:

Setting recoil state yields "ownKeys target is non-extensible but trap result keys differ from target keys" on v12

[mattlewer]

Are you explicitly mentioning Android, because this doesn't occur on iOS or is it simply because that's the only platform you've tested on? If the latter is the case, I'd like to update the title to be more precise - for example:

Setting recoil state yields "ownKeys target is non-extensible but trap result keys differ from target keys" on v12

Thank you for your quick response, this appears to only occur on Android, strangely iOS is working fine :)

[kraenhansen]

Just to be sure, are you testing with Hermes enabled on both iOS and Android?

[mattlewer]

Yep, Hermes is enabled on both

podfile:
:hermes_enabled => true

gradle.properties:
hermesEnabled=true

Also, if it helps:
RN Version: "0.72.6"
realm: "12.5.0"
@react/realm: "0.6.2"
recoil: "0.7.6"

[kraenhansen]

Might be related to facebook/hermes#1063

[kraenhansen]

It would be great if you could create an issue with the recoil repository too, I suspect it is their Proxy throwing this.

[mattlewer]

Unfortunately there has been no reply from the Recoil repo guys. The package has not been updated in almost a year and allegedly the lead dev has been let go by Meta. As a result we are in the process of switching from using Recoil to another method (useContext).

Not sure where this leaves this bug as technically it is still a problem, but not one that looks like it will be solved soon if it is indeed the Recoil side causing these issues. Using useContext we do not face this issue.

[kneth]

@mattlewer Thank you for getting back to us.

I am happy to hear that you have found an alternative solution. I agree, it is unlikely that the issue will be fixed. I will leave the issue open for other users to find it in case they run into the same situation - and can learn from your solution.

[nirinchev]

Closing this as there's nothing obvious left for us to do here.