Ошибка синтаксического анализа: неожиданный токен = ReactJs

Question

import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './containers/App';
import NotFoundPage from './containers/NotFoundPage.js';
import LoginPage from './containers/LoginPage';
import FormPage from './containers/FormPage';
import TablePage from './containers/TablePage';
import Dashboard from './containers/DashboardPage';
import Masques from './containers/Masques'
import Paques from './containers/Paques'
export default (
  <Route>
    <Route path="login" component={LoginPage}/>
    <Route path="/" component={App}>
      <IndexRoute component={Dashboard}/>
      <Route path="dashboard" component={Dashboard}/>
      <Route path="form/:id" component={FormPage}/>
      <Route path="test" component={Masques}/>
      <Route path="paques" component={Paques}/>
      <Route path="table" component={TablePage}/>
      <Route path="*" component={NotFoundPage}/>
    </Route>
  </Route>
);

import React, { Component} from 'react';
import {Link} from 'react-router';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentCreate from 'material-ui/svg-icons/content/create';
import ContentAdd from 'material-ui/svg-icons/content/add';
import {pink500, grey200, grey500, redA200} from 'material-ui/styles/colors';
import PageBase from '../components/PageBase';
import Data from '../data';
import ContentDeleteSweep from 'material-ui/svg-icons/content/delete-sweep';
import axios from 'axios';
import src from './src'  ;
class Masques extends Component {
 .....
};

export default Masques;

Я работаю над реагирующим веб-приложением, я только что скачал шаблон и начал работу над ним, но, похоже, у меня возникли непредвиденные ошибки, код работает хорошо в браузере, но я запускаю npm start I получить эти ошибки, но приложение работает даже отлично введите описание изображения здесь

вот также исходный код страниц, о которых они говорят

import React, { Component} from 'react';
import {Link} from 'react-router';
import {Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import ContentCreate from 'material-ui/svg-icons/content/create';
import ContentAdd from 'material-ui/svg-icons/content/add';
import {pink500, grey200, grey500, redA200} from 'material-ui/styles/colors';
import PageBase from '../components/PageBase';
import Data from '../data';
import ContentDeleteSweep from 'material-ui/svg-icons/content/delete-sweep';
import axios from 'axios';
import src from './src'  ;
class Masques extends Component {
    state={
        masque:[]
    };
      componentWillMount(){
        this.masqueAff()
    };
        masqueAff=()=>{
          var url=src.url+'masqueAff.php/?idcata=1';
            axios.get(url)
            .then((response) => {
              console.log(response);
              //alert(JSON.stringify(response.data))
                this.setState({masque:response.data}); 
                //alert(this.state.masque)
            })
            .catch(function (error) {
                console.log(error);
            });
        };
        render() {
  const styles = {
    floatingActionButton: {
      margin: 0,
      top: 'auto',
      right: 20,
      bottom: 20,
      left: 'auto',
      position: 'fixed',
    },
    editButton: {
      fill: grey500
    },
    columns: {
      id: {
        width: '10%'
      },
      name: {
        width: '40%'
      },
      price: {
        width: '20%'
      },
      category: {
        width: '20%'
      },
      edit: {
        width: '10%'
      }
    }
  };

  return (
    <PageBase title="Table Page"
              navigation="Application / Table Page">

      <div>
        <Link to="/form" >
          <FloatingActionButton style={styles.floatingActionButton} backgroundColor={pink500}>
            <ContentAdd />
          </FloatingActionButton>
        </Link>

        <Table>
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
              <TableHeaderColumn>Price</TableHeaderColumn>
              <TableHeaderColumn>Category</TableHeaderColumn>
              <TableHeaderColumn>Edit</TableHeaderColumn>
              <TableHeaderColumn>Delete</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody>
            {this.state.masque.map(item =>
              <TableRow key={item.id}>
                <TableRowColumn>{item.id}</TableRowColumn>
                <TableRowColumn>{item.nom}</TableRowColumn>
                <TableRowColumn>{item.prix}</TableRowColumn>
                <TableRowColumn>{item.idCata==1?<p>Peaux</p>:<p>Cheuveux</p>}</TableRowColumn>
                <TableRowColumn>
                  <Link className="button" to="/form">
                    <FloatingActionButton zDepth={0}
                                          mini={true}
                                          backgroundColor={grey200}
                                          iconStyle={styles.editButton}>
                      <ContentCreate  />
                    </FloatingActionButton>
                  </Link>
                </TableRowColumn>
                <TableRowColumn>
                  <Link className="button" to="/form/1">
                    <FloatingActionButton zDepth={0}
                                          mini={true}
                                          backgroundColor={redA200}
                                          iconStyle={styles.editButton}>
                    <ContentDeleteSweep  />
                    </FloatingActionButton>
                  </Link>
            </TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </PageBase>
  );
};}

export default Masques;

Answer 1

Ошибки, показанные выше на изображении, являются проблемами eslint.Ошибка показана на изображении ниже:

React.createElement: type is invalid -- expected a string or a class/function but got: undefined

Это означает, что вы импортируете неправильно.Существует два типа импорта и экспорта default и named.Пример

// a.js
const a =1;
const b= 2;
const c =3;
export {a, b};// named export
export default c;// default export

Затем в другом файле egbjs они могут быть импортированы как

import {a, b} from './a.js';// named import. Name for import should be same as export
import c from './a.js';// default import. Name of import can be differ from name of export

Пожалуйста, подтвердите свои условия импорта, экспорта.Ошибка в том, что один из ваших импортов неправильный

Answer 2

В компонентах React вы должны установить начальное состояние в конструкторе.

constructor(props) {
    super(props);
    this.state = { masque: [] };
}

вместо

state={
    masque:[]
};

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