Error when adding mock to Amplify API in React Native project

Question

I'm currently working on a React Native project where I'm using AWS Amplify for my backend API. I am trying to add a mock to my Amplify API for testing purposes, but I encountered an error using this command:

amplify mock api

resulting in this error message:

Edit your schema at 
/***/***/***/***/amplify/backend/api/***/schema.graphql or place .graphql files in a directory at /***/***/***/***/amplify/backend/api/***/schema
Failed to start API Mocking. Running cleanup tasks.
Reason: Error: Parse error on resolvers/Query.syncCouriers.req.vtl:11:50
Parse error on line 12:
...tx.stash.authFilter.or ) #if( $fil
-----------------------^
Expecting 'ID', 'CONTENT', got '||' 

I'm not sure what exactly is causing this error and how to resolve it. I have already checked my schema file and ensured that it is properly formatted. I also tried creating a separate .graphql file in the specified directory, but the error persists.

package.json:

{
  "name": "ubereatsuser",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-community/netinfo": "9.3.5",
    "@react-native-picker/picker": "2.4.8",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/material-bottom-tabs": "^6.2.1",
    "@react-navigation/material-top-tabs": "^6.2.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.1",
    "aws-amplify": "^4.3.20",
    "aws-amplify-react-native": "^6.0.4",
    "expo": "~47.0.0",
    "expo-status-bar": "~1.4.4",
    "graphql": "^14.7.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-native": "0.70.8",
    "react-native-maps": "1.3.2",
    "react-native-pager-view": "6.0.1",
    "react-native-paper": "^4.12.0",
    "react-native-safe-area-context": "4.4.1",
    "react-native-screens": "~3.18.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.1.0",
    "react-native-web": "~0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.27",
    "@types/react-native": "~0.64.12",
    "typescript": "^4.9.4"
  },
  "private": true
}

schema.graphql:

enum TransportationModes {
  DRIVING
  BICYCLING
}

type Courier @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  sub: String!
  lat: Float
  lng: Float
  transportationMode: TransportationModes!
}

type Basket @model @auth(rules: [{allow: public}]) {
  id: ID!
  BasketDishes: [BasketDish] @hasMany(indexName: "byBasket", fields: ["id"])
  userID: ID! @index(name: "byUser")
  restaurantID: ID! @index(name: "byRestaurant")
}

enum OrderStatus {
  NEW
  COOKING
  READY_FOR_PICKUP
  PICKED_UP
  COMPLETED
  ACCEPTED
}

type OrderDish @model @auth(rules: [{allow: public}]) {
  id: ID!
  quantity: Int!
  Dish: Dish @hasOne
  orderID: ID! @index(name: "byOrder")
}

type Order @model @auth(rules: [{allow: public}]) {
  id: ID!
  userID: ID! @index(name: "byUser")
  Restaurant: Restaurant @hasOne
  total: Float!
  status: OrderStatus!
  OrderDishes: [OrderDish] @hasMany(indexName: "byOrder", fields: ["id"])
  Courier: Courier @hasOne
}

type BasketDish @model @auth(rules: [{allow: public}]) {
  id: ID!
  quantity: Int!
  Dish: Dish @hasOne
  basketID: ID! @index(name: "byBasket")
}

type User @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  address: String!
  lat: Float!
  lng: Float!
  Orders: [Order] @hasMany(indexName: "byUser", fields: ["id"])
  Baskets: [Basket] @hasMany(indexName: "byUser", fields: ["id"])
  sub: String!
}

type Dish @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  image: String
  description: String
  price: Float!
  restaurantID: ID! @index(name: "byRestaurant")
}

type Restaurant @model @auth(rules: [{allow: public}]) {
  id: ID!
  name: String!
  image: String!
  deliveryFee: Float!
  minDeliveryTime: Int!
  maxDeliveryTime: Int!
  rating: Float
  address: String!
  lat: Float!
  lng: Float!
  Dishes: [Dish] @hasMany(indexName: "byRestaurant", fields: ["id"])
  Baskets: [Basket] @hasMany(indexName: "byRestaurant", fields: ["id"])
}
 ````
Thank you for your help!

Answer 1

I was able to resolve this on my end by downgrading my amplify version to "@aws-amplify/cli/@12.0.0.

First I uninstalled my current version with npm uninstall -g @aws-amplify/cli and then re-installed an older version npm install -g @aws-amplify/cli@12.0.0.

I had also followed the advice on the amplify page that says to use openjdk 16.0.1. The java version by itself didn't resolve the issue - but having both this version of jdk and this version of amplify-cli I am no able to mock successfully.