React JS：モジュールビルドに失敗しました：SyntaxError：予期しないトークン

Question

私は最近react-create-appを使って作成したサンプルアプリケーションを既存のReactプロジェクトに移したかったのです。

私はreact-autosuggestライブラリを使用して簡単な検索バーを表示しています。私の既存のファイルをエクスポート中

は、プロジェクトを反応させ、私は次のエラーを取得する：

Module build failed: SyntaxError: Unexpected token (126:11) 

    124 | } 
    125 | 
> 126 | onChange = (event, { newValue }) => { 
     |   ^
    127 |  this.setState({ 
    128 |  value: newValue 
    129 |  }); 

BabelLoaderError: SyntaxError: Unexpected token (126:11) 

    124 | } 
    125 | 
> 126 | onChange = (event, { newValue }) => { 
     |   ^
    127 |  this.setState({ 
    128 |  value: newValue 
    129 |  }); 

コードがreact-autosuggestライブラリの一部

あるプロジェクトで、私が見る唯一の違いは、彼らのdevDependenciesです、package.jsonにあります。

はここで働いているプロジェクトのpackage.jsonです：

{ 
    "name": "autosuggestapp", 
    "version": "0.1.0", 
    "private": true, 
    "dependencies": { 
    "react": "^15.6.1", 
    "react-autosuggest": "^9.2.0", 
    "react-dom": "^15.6.1" 
    }, 
    "devDependencies": { 
    "react-scripts": "1.0.7" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
} 

はここでエラーが発生しました一つだ：

{ 
    "name": "my-app", 
    "version": "0.0.1", 
    "description": "my app", 
    "readme": "./README.md", 
    "dependencies": { 
    "babel-polyfill": "6.22.0", 
    "history": "4.5.1", 
    "invariant": "2.2.2", 
    "lodash": "4.17.4", 
    "node-sass": "^3.13.1", 
    "query-string": "4.3.1", 
    "react": "15.4.2", 
    "react-autosuggest": "^9.3.0", 
    "react-dom": "15.4.2", 
    "react-redux": "5.0.2", 
    "react-tooltip": "3.2.7", 
    "redux": "3.6.0", 
    "redux-saga": "0.14.3", 
    "reselect": "2.5.4", 
    "sn-http-request": "0.0.16" 
    }, 
    "devDependencies": { 
    "babel-cli": "6.22.2", 
    "babel-core": "6.22.1", 
    "babel-eslint": "7.1.1", 
    "babel-loader": "6.2.10", 
    "babel-preset-es2015": "6.22.0", 
    "babel-preset-react": "6.22.0", 
    "babel-preset-stage-3": "6.17.0", 
    "case-sensitive-paths-webpack-plugin": "1.1.4", 
    "colors": "1.1.2", 
    "cross-env": "3.1.3", 
    "css-loader": "0.26.1", 
    "eslint": "3.14.1", 
    "eslint-loader": "1.6.1", 
    "eslint-plugin-import": "2.2.0", 
    "eslint-plugin-jsx-a11y": "3.0.2", 
    "eslint-plugin-react": "6.9.0", 
    "extract-text-webpack-plugin": "1.0.1", 
    "fs-extra": "0.30.0", 
    "glob": "7.1.1", 
    "jasmine-reporters": "2.2.0", 
    "jest": "18.1.0", 
    "jest-cli": "18.1.0", 
    "lodash-webpack-plugin": "0.11.0", 
    "mkdirp": "0.5.1", 
    "moment": "2.15.1", 
    "node-sass": "4.5.0", 
    "npm-run-all": "3.1.0", 
    "q": "1.4.1", 
    "replacestream": "4.0.2", 
    "sass-loader": "4.0.2", 
    "stringify-object": "3.1.0", 
    "through2": "2.0.1", 
    "watch": "1.0.1", 
    "webpack": "1.14.0", 
    "xml2js": "0.4.17", 
    "yargs": "6.0.0" 
    }, 
    "repository": { 
    "type": "git", 
    "url": <my project's git url> 
    }, 
    "engines": { 
    "node": ">=6.9.0" 
    }, 
    "jest": { 
    "testPathIgnorePatterns": [ 
     "/node_modules/", 
     "/target/" 
    ], 
    "setupTestFrameworkScriptFile": "./tool/jasmine.env.js" 
    }, 
    "scripts": { 
    "clean-target": "babel-node ./tool/build.cleanup.js", 
    "build:resources": "babel-node ./tool/buildResources.js", 
    "build:js": "babel-node ./tool/buildJs.js", 
    "intl": "babel-node ./tool/intl", 
    "build:intl": "npm-run-all build:resources intl", 
    "watch": "babel-node ./tool/watcher.js", 
    "watch-quick": "babel-node ./tool/watcher.js -q", 
    "prebuild": "npm run clean-target", 
    "build": "npm-run-all --parallel build:intl build:js", 
    "build:watch": "npm-run-all build:intl watch", 
    "start": "npm-run-all prebuild build:resources watch-quick", 
    "test": "echo 'Do not run jest until fixed'", 
    "test:watch": "npm run test -- --watch" 
    } 
} 

Answer 1

私はあなたがあるClass instance fields構文を使用しているので、それだと思います第2ステージでは、バベルステージ3のプリセットを使用しています（package.jsonを投稿することをお勧めします）

チェックアウト：here。第2段階を有効にすると、エラーが消えることがわかります。