Попытка AWS-Amplify -> «npm start» не работает

Чтобы лучше знать, как использовать AWS-Amplify, я слежу за этот документ.

Все идет хорошо, пока я не достигну точки (Шаг 4. Интеграция ресурсов AWS), где после изменения src/app.js я хочу запустить эту команду:

$ npm start

а затем, надеюсь, посмотрите (в браузере) на:

http://localhost:8080/

Но вот что происходит при запуске запуск нпм

$ npm start

> [email protected] start /Users/myaccount/amplify-js-app
> webpack && webpack-dev-server --mode development

Hash: xyzaghs789
Version: webpack 4.33.0
Time: 116ms
Built at: 06/10/2019 11:03:49 PM
         Asset      Size  Chunks             Chunk Names
    index.html  1.55 KiB          [emitted]  
main.bundle.js  28.9 KiB    main  [emitted]  main
Entrypoint main = main.bundle.js
[./src/app.js] 145 bytes {main} [built] [failed] [1 error]

ERROR in ./src/app.js 26:0
Module parse failed: Unexpected token (26:0)
You may need an appropriate loader to handle this file type.
|     });
| 
> 
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack && webpack-dev-server --mode development`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. 
There is likely additional logging output above.
......
$

Поскольку здесь нет ничего моего собственного кода, только то, что я получил из документа, указанного выше. Я предполагаю, что другие люди также столкнулись с той же проблемой в какой-то момент.

Могу ли я что-нибудь сделать, чтобы решить эту проблему? (кто-то знает)

Просто для справки, вот содержимое ./src/app.js, скопированное по ссылке, указанной выше:

import Auth from '@aws-amplify/auth';
import Analytics from '@aws-amplify/analytics';

import awsconfig from './aws-exports';

// retrieve temporary AWS credentials and sign requests
Auth.configure(awsconfig);
// send analytics events to Amazon Pinpoint
Analytics.configure(awsconfig);

const AnalyticsResult = document.getElementById('AnalyticsResult');
const AnalyticsEventButton = document.getElementById('AnalyticsEventButton');
let EventsSent = 0;

AnaltyicsEventButton.addEventListener('click', (event) => {
  const { aws_mobile_analytics_app_region, aws_mobile_analytics_app_id } = awsconfig;

  Analytics.record('Amplify Tutorial Event')
    .then((event) => {
      const url = `https://${aws_mobile_analytics_app_region}.console.aws.amazon.com/pinpoint/home/?region=${aws_mobile_analytics_app_region}#/apps/${aws_mobile_analytics_app_id}/analytics/events`;
      AnalyticsResult.innerHTML = '<p>Event Submitted. </p>';
      AnalyticsResult.innerHTML += '<p>Events sent: '+(++EventsSent)+'</p>';
      AnalyticsResult.innerHTML += '<a href = "'+url+'" target = "_blank">View Events on the Amazon Pinpoint Console</a>';
    });

Не могли бы вы обновить свой пост, указав содержимое вашего файла ./src/app.js?

David R 10.06.2019 16:42

Если вы просто хотите создать приложение для реагирования с помощью aws-amplify, вместо этого следуйте aws-amplify.github.io/docs/js/реагировать, это сработает.

Yik San Chan 10.06.2019 19:37

Я хочу следовать документу, который я упомянул, чтобы изучить AWS-Amplify.

Michel 11.06.2019 02:16

@David R. Содержимое ./src/app — это не что иное, как то, что я скопировал из документа, о котором упоминал в своем посте.

Michel 11.06.2019 02:21

Я мог бы добавить это в пост, но это сделало бы его длиннее, чем необходимо, поскольку можно увидеть исходный код (app.js), просто нажав на ссылку. Я тоже только что проверил (подтвердил), что не ошибся при копировании.

Michel 11.06.2019 02:29

Я добавил в пост содержимое файла ./src/app.js.

Michel 11.06.2019 18:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
6
971
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На всякий случай, если кто-то еще столкнулся с той же проблемой. Это (фигурная скобка и паратеза):

});

отсутствует в конце файла ./src/app.js в файле документ.

Другие вопросы по теме