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中，但你使用的是Babel stage-3預設（好主意來發布你的package.json！）

看看吧here。如果啓用階段2，則會看到錯誤消失。