Fix optimistic update crash when following v2 docs

[AlanFoster]

Without this change, the following crash was observed locally when clicking the toggle button in the ItemsList component

Uncaught TypeError: 'get' on proxy: property 'toggleForm' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')
    at Item (ItemsList.tsx:10:9)
    at Object.react_stack_bottom_frame (react-dom_client.js?v=308ae0de:18763:20)
    at renderWithHooks (react-dom_client.js?v=308ae0de:5908:24)
    at updateFunctionComponent (react-dom_client.js?v=308ae0de:7729:21)
    at beginWork (react-dom_client.js?v=308ae0de:8779:20)
    at runWithFiberInDEV (react-dom_client.js?v=308ae0de:1251:72)
    at performUnitOfWork (react-dom_client.js?v=308ae0de:12815:98)
    at workLoopSync (react-dom_client.js?v=308ae0de:12678:43)
    at renderRootSync (react-dom_client.js?v=308ae0de:12662:13)
    at performWorkOnRoot (react-dom_client.js?v=308ae0de:12081:37)

[jho406]

@AlanFoster Do you still have a branch that reproduces this? I'm interested in digging into it.

[AlanFoster]

Of course!

Replication steps:

git clone [email protected]:thoughtbot/superglue_rails.git --branch v2
git clone [email protected]:thoughtbot/shopping_list.git

cd shopping_list
bin/setup

Code diff - i.e. reintroducing the option that this PR aims to remove:

--- a/app/javascript/components/ItemsList.jsx
+++ b/app/javascript/components/ItemsList.jsx
@@ -8,6 +8,7 @@ const Item = ({ itemRef }) => {
     name,
     completed,
     detailPath,
+    toggleForm
   } = useContent(itemRef)
   
   const set = useSetFragment()
@@ -51,4 +52,4 @@ export default function ItemsList({ itemsRef }) {
       ))}
     </ul>
   )

Replication steps:

Click the Toggle button on an item and see it crash:

Page will turn white; and the stack trace is in the console log:

Uncaught TypeError: 'get' on proxy: property 'toggleForm' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '#<Object>')
    at Item (ItemsList.jsx:11:5)
    at Object.react_stack_bottom_frame (react-dom-client.development.js:23863:20)
... etc ..

Let me know if there's anything else I can do to help 💯

[jho406]

Looking into this, this is a bug. I think... i'm returning a frozen object because of the use of immer in useSetFragment and that's causing the frozen violation. I'll have a fix for it soon.

[jho406]

@AlanFoster I have a fix for that error for you encountered: #179 Thanks for reporting this!

[jho406]

Closing this PR. A fix was released in 2.0.0-alpha.9.

[AlanFoster]

Confirmed as working now, thanks!