'Error following AWS Amplify DataStore documentation

When I follow the AWS Amplify documentation for setting up DataStore using the CLI, the following code

import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

import { DataStore } from 'aws-amplify';

try {
  const data = await DataStore.query(TestData);
  console.log("Data retrieved successfully!", JSON.stringify(data, null, 2));
} catch (error) {
  console.log("Error retrieving data", error);
}

where TestData is defined in my schema.graphql as described on the docs, gives

Unexpected identifier '_awsAmplify'. Expected ';' after variable declaration.
at node_modules/metro-runtime/src/modules/HMRClient.js:106:4 in inject
at node_modules/metro-runtime/src/modules/HMRClient.js:115:2 in injectUpdate
at node_modules/metro-runtime/src/modules/HMRClient.js:183:20 in on$argument_1
at node_modules/metro-runtime/src/modules/vendor/eventemitter3.js:229:10 in emit
at node_modules/metro-runtime/src/modules/HMRClient.js:162:10 in _ws.onmessage
at node_modules/react-native/Libraries/WebSocket/WebSocket.js:229:8 in _eventEmitter.addListener$argument_1
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

What does this error mean and how do I avoid it?

There is a cryptic and possibly relevant (and not quite grammatically correct) statement in the documentation that

When the @aws-amplify/datastore dependency is added to the project, the plugin is automatic initialized when you start using.

But no instructions to add that dependency (which is in any case case clearly available as part of aws-amplify as the successful import of DataStore demonstrates).

Explicitly adding both @aws-amplify/datastore (ignoring warnings that it is already there) and amazon-cognito-identity-js as dependences does not fix the issue.


The same project works fine with GraphQL, e.g., if I replace the above with something like:

import { Amplify } from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

const listTestData = `
  query ListTestData(
    $filter: ModelTestDataFilterInput
    $limit: Int
    $nextToken: String
  ) {
    listTestData(filter: $filter, limit: $limit, nextToken: $nextToken) {
      items {
        id
        name
        categories
        createdAt
        updatedAt
      }
    }
  }
`
import { API, graphqlOperation } from 'aws-amplify'
API.graphql(graphqlOperation(listTestData, { filter: {},  limit: 50 })).then( f => console.log(f) )

In case it matters, I'm building using

eas build --profile development --platform ios --local

and running using

expo start --dev-client


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source