SyntaxError：reactjs中意外的令牌导入

Question

我一直在尝试创建一个反应式网络应用程序，我在visual studio代码调试器中收到错误。

SyntaxError: Unexpected token import

。这是我的package.json文件。我完全按照文档所说的方式导入了所有内容。

{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

这是调试器控制台指向的approuter.js文件。

import React from 'react';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage.js';
import AddPage from '../components/AddPage.js';
import EditPage from '../components/EditPage.js';
import HelpPage from '../components/HelpPage.js';
import NotFoundPage from '../components/NotFoundPage.js'
import Header from '../components/Header.js'


console.log("working ");
    const AppRouter = ()=>(
        <BrowserRouter>
        <div>
        <Header/>
        <Switch>
         <Route path="/" component={ExpenseDashboardPage} exact={true}/>
         <Route path="/create" component={AddPage}/>
         <Route path="/edit/:id" component={EditPage} exact={true}/>
         <Route path="/help" component={HelpPage} exact={true}/>
         <Route  component={NotFoundPage}/>
        </Switch>
        </div>
        </BrowserRouter>
    );

    export default AppRouter;