DataStore "Cannot read property 'operation' of undefined" with Remix

[aspittel]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Remix.js

Amplify APIs

DataStore

Amplify Categories

api

Environment information

``` System: OS: macOS 10.15.7 CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz Memory: 30.52 MB / 16.00 GB Shell: 5.7.1 - /bin/zsh Binaries: Node: 16.3.0 - ~/.nvm/versions/node/v16.3.0/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 8.5.3 - ~/.nvm/versions/node/v16.3.0/bin/npm Browsers: Chrome: 100.0.4896.75 Firefox: 91.7.1 Safari: 15.3 npmPackages: @aws-amplify/ui-react: ^2.11.0 => 2.11.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @remix-run/dev: ^1.3.3 => 1.3.3 @remix-run/eslint-config: ^1.3.3 => 1.3.3 @remix-run/react: ^1.3.4 => 1.3.4 @remix-run/serve: ^1.3.4 => 1.3.4 aws-amplify: ^4.3.18 => 4.3.18 eslint: ^8.11.0 => 8.12.0 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 remix: ^1.3.3 => 1.3.3 npmGlobalPackages: @architect/architect: 10.1.0 @aws-amplify/cli: 7.6.26 aws-amplify: 4.3.11-unstable.4+73587d78f aws-cdk: 1.131.0 aws-sdk: 2.1090.0 create-react-app: 5.0.0 netlify-cli: 9.13.3 npm: 8.5.3 standard: 16.0.4 ```

Describe the bug

DataStore crashes every few calls with Remix. This isn't consistent behavior, it happens every 3-5 DataStore calls.

Expected behavior

DataStore to return data and not crash my development server

Reproduction steps

1. Create a Remix app
2. Create a DataStore instance (I used Studio)
3. Build a loader and an action
4. call both a few times

Code Snippet

// loader
export const loader = async () => {
  console.log('is the problem here?')
  const SSR = withSSRContext()
  const tasks = await SSR.DataStore.query(Task)

  return json(
    serializeModel(tasks)
  )
}

Log output

``` // Put your logs below this line Error message: /Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/src/sync/outbox.ts:159 if (head.operation !== recordOp) { ^ TypeError: Cannot read property 'operation' of undefined at MutationEventOutbox. (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/src/sync/outbox.ts:159:12) at step (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:44:23) at Object.next (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:25:53) at /Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:19:71 at new Promise () at __awaiter (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:15:12) at MutationEventOutbox.syncOutboxVersionsOnDequeue (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:236:16) at MutationEventOutbox. (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/src/sync/outbox.ts:100:15) at step (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:44:23) at Object.next (/Users/spittela/Desktop/code/amplify-todoist/node_modules/@aws-amplify/datastore/lib/sync/outbox.js:25:53) ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

https://user-images.githubusercontent.com/12969662/162240480-b1d50c48-9e03-4ee6-acdd-bc545e800bf7.mp4

[iartemiev]

Tagging @abdallahshaban557 for tracking Remix support

[abdallahshaban557]

@iartemiev - we have investigated this, and we have noticed that the req objects that are generated by Remix are different than ones generated by NextJS or even Sveltekit. We need to discuss internally what we need to do in terms of our Remix support in general. I am closing this issue in favor of #9362