Attempt to recreate AWS Demo ends up recreating error within demo

Question

I started following the demo at https://youtu.be/NLN-q47uPo0 and ran into the (almost) identical error shown at https://youtu.be/NLN-q47uPo0?t=2880 . Anyone know the cause and resolution for it? It appears as if the data storage has not been set up, but the presenter ran another version of the same app that worked.

The app is a plain vanilla React app with Amplify data and content defined (and sync'ed). When trying to display the collection, I get the following error in console. Note that 'device' is the model I have defined in Amplify Studio (equivalent of 'recipe' in the demo above):

Uncaught TypeError: Cannot set properties of undefined (setting 'device')
    at datastore.ts:396:1
    at Array.forEach (<anonymous>)
    at initializeInstance (datastore.ts:392:1)
    at datastore.ts:408:1
    at produce (immerClass.ts:115:1)
    at Device (datastore.ts:405:1)
    at renderWithHooks (react-dom.development.js:14985:1)
    at mountIndeterminateComponent (react-dom.development.js:17811:1)
    at beginWork (react-dom.development.js:19049:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
(anonymous) @ datastore.ts:396
initializeInstance @ datastore.ts:392
(anonymous) @ datastore.ts:408
produce @ immerClass.ts:115
Device @ datastore.ts:405
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
_aws_amplify_datastore__WEBPACK_IMPORTED_MODULE_3__.DataStore.observeQuery.subscribe.a.items @ useDataStore.tsx:29
...

Magic happens on youtube, official documents are best :) – Ranu Vijay Apr 18 '22 at 22:29 — Ranu Vijay, Apr 18 '22 at 22:29

score 0 · Answer 1 · answered Sep 04 '22 at 21:37

0

I ran into the same problem when trying to use the same name (e.g. Recipe) for the data model and UI component.

Fixed it by changing one of them.

answered Sep 04 '22 at 21:37

Ana Cunha

41
1
5

Attempt to recreate AWS Demo ends up recreating error within demo

1 Answers1