Error with null/undefined values?

[jasonm]

Hello!

I'm running into an error with null or undefined values inside a SyncedStore using @syncedstore/core@0.3.4:

  TypeError: Cannot read properties of undefined (reading 'Symbol(INTERNAL_SYMBOL)')
      at getYjsValue (/...myapp.../node_modules/@syncedstore/core/src/index.ts:65:21)
      at crdtValue (/...myapp.../node_modules/@syncedstore/core/src/internal.ts:48:12)
      at Object.set (/...myapp.../node_modules/@syncedstore/core/src/object.ts:31:23)
      at crdtObject (/...myapp.../node_modules/@syncedstore/core/src/object.ts:99:5)
      at crdtValue (/...myapp.../node_modules/@syncedstore/core/src/internal.ts:70:14)
      at Object.set (/...myapp.../node_modules/@syncedstore/core/src/object.ts:31:23)
      at crdtObject (/...myapp.../node_modules/@syncedstore/core/src/object.ts:99:5)
      at crdtValue (/...myapp.../node_modules/@syncedstore/core/src/internal.ts:70:14)
      at Object.set (/...myapp.../node_modules/@syncedstore/core/src/object.ts:31:23)
      at crdtObject (/...myapp.../node_modules/@syncedstore/core/src/object.ts:99:5)

My particular use-case is inserting a modest JSON document from an API response into a boxed value, and that response happens to have some undefined values in it. Something like this:

const store = syncedStore<StoreShape>({/* ... */});
const apiResp = fetchThing(/*...*/).json();
store.key1.key2 = boxed(apiResp);

I don't see boxing directly related in the traceback, but I'm mentioning it in case it's helpful to understand the use case here.

Here's a small repro case based off the React sandbox from the docs. It adds field to the Todo type called description which may be undefined, and will set the description to undefined if you add a new todo named "bad".

WDYT about storing null/undefined in SyncedStore stores?

[YousefED]

Hi @jasonm ,

Using undefined / null values should work, especially in boxed values.

The example "repro case" doesn't contain any boxed values, so I doubt it's a good reproduction. I'd love to look alongside with you to see what the issue is. Would it be possible to create a codesandbox where you can reproduce the issue?

Click the box icon in the bottom right to open the corresponding Codesandbox of an example, and then you can share your fork here.

[jasonm]

Thanks @YousefED !

Here's a fork of that sandbox (very cool to have such an easy fork-for-repro workflow here, also sandpack looks really cool, gotta dig into that, I digress)

https://codesandbox.io/s/sandpack-project-forked-ot8de?file=/App.tsx

So I (1) updated the type of Todo to include description: string | undefined and (2) updated the onKeyPress handler to to provide a description into the newly inserted todo with some logic: if you give the todo a title of "bad", it sets the description to undefined at which point I see the TypeError: Cannot read properties of undefined (reading 'Symbol(INTERNAL_SYMBOL)') error:

[YousefED]

Thanks @jasonm! That sandbox definitely made it easier for me. I've fixed this in #35 and will release a new version later today