AWS Amplify 教程无法启动客户端应用程序

Question

我正在尝试按照 AWS Amplify 教程创建示例 web 应用程序。 https://docs.amplify.aws/start/getting-started/installation/q/integration/react

当我准备在本地运行客户端前端时，我得到了一长串错误。

我在 WSL 上使用 npm 3.5.2。

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

我已经安装了 aws-amplify/cli、aws-amplify、@aws-amplify/ui-react。

您认为我遗漏了任何软件包或工具吗？谢谢。

Answer 1

npm audit fix --force 也为我工作。

我认为是“react-scripts”从 1.x 版本升级到 3.4.3，但只是猜测。

Answer 2

在使用 AWS React 教程时遇到了同样的错误。

为我解决的问题是： npm audit fix --force

我不建议将它用于实际项目，但因为它是一个教程，所以我不太担心风险。

Answer 3

嗯，错误消息说它缺少“aws-amplify-react”，所以这样做

npm install aws-amplify-react

然后呢？

Answer 4

我在默认 PnP 模式下使用 Yarn 2 时遇到了同样的问题。我发现我必须将它置于松散模式。 https://yarnpkg.com/features/pnp#pnp-loose-mode