Реагируйте - «Ошибка: сборка модуля завершилась ошибкой: SyntaxError: неожиданный токен» для простой функции

Question

Я пытаюсь выяснить это сообщение об ошибке, вот его появление:

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Moment from 'react-moment';
import LoadModal from './LoadModal';
import Posts from './Posts';
import NewPost from './NewPost';

class App extends React.Component {
    constructor(props) {
        super(props);

      this.state = {
        posts: [],
            loading: true
       };
    }

    componentDidMount() {
        axios.get('/posts')
            .then(response => {
            this.setState({ posts: response.data, loading: false });
          });
    }

    addPost: function(post) { // <-- HERE's the error
      this.setState({ posts : this.state.posts });
    }

  render() {
    return (
            <div>
                <NewPost addPost={this.addPost}/>
            <Posts posts={this.state.posts} loading={this.state.loading} />
            </div>
        )
  }
}

export default App

, и сообщение об ошибке находится в точках к этой строке:

addPost: function(post) {

Я былпогуглил проблему и обнаружил, что я могу пропустить некоторые части в конфигурации веб-пакета - это мой package.json:

{
  "name": "@rails/webpacker",
  "version": "3.2.2",
  "description": "Use webpack to manage app-like JavaScript modules in Rails",
  "main": "package/index.js",
  "files": [
    "package",
    "lib/install/config/webpacker.yml"
  ],
  "engines": {
    "node": ">=6.0.0",
    "yarn": ">=0.25.2"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "case-sensitive-paths-webpack-plugin": "^2.1.1",
    "compression-webpack-plugin": "^1.1.6",
    "css-loader": "^0.28.9",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.6",
    "glob": "^7.1.2",
    "js-yaml": "^3.10.0",
    "node-sass": "^4.7.2",
    "path-complete-extname": "^0.1.0",
    "postcss-cssnext": "^3.1.0",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0",
    "webpack-manifest-plugin": "^1.3.2"
  },
  "devDependencies": {
    "eslint": "^4.17.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.6.1",
    "jest": "^22.2.1"
  },
  "jest": {
    "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",
    "roots": [
      "<rootDir>/package"
    ]
  },
  "scripts": {
    "test": "jest",
    "lint": "eslint {package,lib}/"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rails/webpacker.git"
  },
  "author": "David Heinemeier Hansson <david@basecamp.com>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/rails/webpacker/issues"
  },
  "homepage": "https://github.com/rails/webpacker"
}

Я добавил туда этот блок:

    "babel": {
    "presets": [
      "es2015",
      "stage-0",
      "react"
    ]
  },

но это не помогло устранить ошибку, оно все еще там.

Что мне еще не хватает?

Заранее спасибо.

Answer 1

Попробуйте изменить

addPost: function(post) { // <-- HERE's the error
  this.setState({ posts : this.state.posts });
}

на

addPost(post) { 
  this.setState({ posts : this.state.posts });
}

в ES6 это может быть:

addPost = post => { 
  this.setState({ posts : this.state.posts });
}

Answer 2

Вы пытались написать такую ​​функцию? Это не покажет ошибку времени компиляции.

addPost(post) { // <-- HERE's the error
      this.setState({ posts : this.state.posts });
    }