AWS Amplify tutorial fail to start the client app

Question

I'm trying to follow the AWS Amplify tutorial to create the sample webapp. https://docs.amplify.aws/start/getting-started/installation/q/integration/react

When I am up to the step to run the client frontend locally, I got a long list of error.

I'm using npm 3.5.2 on WSL.

Failed to compile.

Error in ./src/App.js
Module not found: 'aws-amplify-react' in /home/efrontier/projects/amplify-webinar/src

 @ ./src/App.js 20:23-51

Error in ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentityPool.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentityPool.js Unexpected token (22:28)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (22:28)
 @ ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/index.js 5:21-57

Error in ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/credential-provider-cognito-identity/dist/cjs/fromCognitoIdentity.js Unexpected token (13:20)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (13:20)
 @ ./~/@aws-sdk/credential-provider-cognito-identity/dist/cjs/index.js 4:21-53

Error in ./~/@aws-sdk/client-cognito-identity/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-cognito-identity/dist/cjs/protocols/Aws_json1_1.js Unexpected token (4:79)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:79)
 @ ./~/@aws-sdk/client-cognito-identity/dist/cjs/commands/DeleteIdentitiesCommand.js 3:22-57

Error in ./~/@aws-sdk/client-lex-runtime-service/dist/cjs/protocols/Aws_restJson1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-lex-runtime-service/dist/cjs/protocols/Aws_restJson1_1.js Unexpected token (5:78)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:78)
 @ ./~/@aws-sdk/client-lex-runtime-service/dist/cjs/commands/DeleteSessionCommand.js 3:26-65

Error in ./~/@aws-sdk/client-pinpoint/dist/cjs/protocols/Aws_restJson1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-pinpoint/dist/cjs/protocols/Aws_restJson1_1.js Unexpected token (5:74)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:74)
 @ ./~/@aws-sdk/client-pinpoint/dist/cjs/commands/CreateCampaignCommand.js 3:26-65

Error in ./~/@aws-sdk/client-firehose/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-firehose/dist/cjs/protocols/Aws_json1_1.js Unexpected token (4:81)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:81)
 @ ./~/@aws-sdk/client-firehose/dist/cjs/commands/CreateDeliveryStreamCommand.js 3:22-57

Error in ./~/@aws-sdk/client-kinesis/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-kinesis/dist/cjs/protocols/Aws_json1_1.js Unexpected token (4:76)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (4:76)
 @ ./~/@aws-sdk/client-kinesis/dist/cjs/commands/AddTagsToStreamCommand.js 3:22-57

Error in ./~/idb/build/cjs/index.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/idb/build/cjs/index.js Unexpected token (66:25)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (66:25)
 @ ./~/@aws-amplify/datastore/lib/storage/adapter/indexeddb.js 85:23-37

Error in ./~/@aws-sdk/client-personalize-events/dist/cjs/protocols/Aws_restJson1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-personalize-events/dist/cjs/protocols/Aws_restJson1_1.js Unexpected token (5:74)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:74)
 @ ./~/@aws-sdk/client-personalize-events/dist/cjs/commands/PutEventsCommand.js 3:26-65

Error in ./~/@aws-sdk/client-s3/dist/cjs/protocols/Aws_restXml.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-s3/dist/cjs/protocols/Aws_restXml.js Unexpected token (7:81)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (7:81)
 @ ./~/@aws-sdk/client-s3/dist/cjs/commands/CopyObjectCommand.js 3:22-57

Error in ./~/@aws-sdk/client-translate/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-translate/dist/cjs/protocols/Aws_json1_1.js Unexpected token (5:78)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:78)
 @ ./~/@aws-sdk/client-translate/dist/cjs/commands/DeleteTerminologyCommand.js 3:22-57

Error in ./~/@aws-sdk/client-polly/dist/cjs/protocols/Aws_restJson1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-polly/dist/cjs/protocols/Aws_restJson1_1.js Unexpected token (5:78)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:78)
 @ ./~/@aws-sdk/client-polly/dist/cjs/commands/DeleteLexiconCommand.js 3:26-65

Error in ./~/@aws-sdk/client-textract/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-textract/dist/cjs/protocols/Aws_json1_1.js Unexpected token (5:76)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:76)
 @ ./~/@aws-sdk/client-textract/dist/cjs/commands/DetectDocumentTextCommand.js 3:22-57

Error in ./~/@aws-sdk/client-rekognition/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-rekognition/dist/cjs/protocols/Aws_json1_1.js Unexpected token (5:73)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:73)
 @ ./~/@aws-sdk/client-rekognition/dist/cjs/commands/CreateCollectionCommand.js 3:22-57

Error in ./~/@aws-sdk/client-comprehend/dist/cjs/protocols/Aws_json1_1.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/client-comprehend/dist/cjs/protocols/Aws_json1_1.js Unexpected token (5:88)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (5:88)
 @ ./~/@aws-sdk/client-comprehend/dist/cjs/commands/BatchDetectEntitiesCommand.js 3:22-57

Error in ./~/@aws-sdk/signature-v4/dist/cjs/SignatureV4.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/signature-v4/dist/cjs/SignatureV4.js Unexpected token (36:10)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (36:10)
 @ ./~/@aws-sdk/signature-v4/dist/cjs/index.js 5:21-45

Error in ./~/@aws-sdk/node-http-handler/build/node-http2-handler.js
Module not found: 'http2' in /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/node-http-handler/build

 @ ./~/@aws-sdk/node-http-handler/build/node-http2-handler.js 3:16-32

Error in ./~/@aws-sdk/credential-provider-process/build/index.js
Module not found: 'child_process' in /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/credential-provider-process/build

 @ ./~/@aws-sdk/credential-provider-process/build/index.js 5:22-46

Error in ./~/@aws-sdk/eventstream-serde-node/build/EventStreamMarshaller.js
Module parse failed: /home/efrontier/projects/amplify-webinar/node_modules/@aws-sdk/eventstream-serde-node/build/EventStreamMarshaller.js Unexpected token (39:18)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (39:18)
 @ ./~/@aws-sdk/eventstream-serde-node/build/provider.js 3:32-66

I have installed aws-amplify/cli, aws-amplify, @aws-amplify/ui-react.

Do you think I've missed any packages or tools? thanks.

score 2 · Answer 1 · edited Sep 18 '20 at 14:34

2

npm audit fix --force worked for me too.

I think it was the upgrade of "react-scripts" from 1.x version to 3.4.3, but just a guess.

edited Sep 18 '20 at 14:34

Aditya Prakash

1,549
2
15
31

answered Sep 18 '20 at 01:59

Dylan Ritter

21
4

score 0 · Answer 2 · answered Jun 18 '20 at 14:22

0

Had the same errors with an AWS React tutorial.

What fixed it for me was: npm audit fix --force

I wouldn't recommend it for a real project but as it was a tutorial I was less bothered about the risk.

answered Jun 18 '20 at 14:22

CLeung

1

score 0 · Answer 3 · answered Jul 02 '20 at 19:49

0

Well, the error message says that it is missing "aws-amplify-react", so do

npm install aws-amplify-react

then?

answered Jul 02 '20 at 19:49

Mat-KH

76
4

score 0 · Answer 4 · answered Feb 04 '21 at 01:36

0

I ran into the same issue while using Yarn 2 in default PnP mode. I found that I had to put it into loose mode. https://yarnpkg.com/features/pnp#pnp-loose-mode

answered Feb 04 '21 at 01:36

Raymond

1

AWS Amplify tutorial fail to start the client app

4 Answers4