想要使用ES8异步/等待我的项目。最近一直在ReactNative上使用它与Expo,所以没想到ReactJS有任何问题。虽然,该应用程序现在无法构建... 这是我得到的错误:
Syntax error: C:/projects/project1/src/containers/OfferOverview.js: Unexpected token (84:40)
83 |
> 84 | initialGetProduct = async (productId) => {
| ^
85 | const { dispatch } = this.props;
86 | await dispatch(resetOfferStateAction());
87 | dispatch(getProductAction(productId));
这是组件,我已经删除了大部分内容,因为我怀疑它们可能与此问题有关:
export class OfferOverview extends Component {
componentWillMount() {
this.initialGetProduct(this.props.location.query.product_id);
}
// same error will be using async initialGetProduct() {
initialGetProduct = async (productId) => {
const { dispatch } = this.props;
await dispatch(resetOfferStateAction());
dispatch(getProductAction(productId));
this.selectProduct(productId);
}
render() { ... }
}
我尝试在babel配置中设置es2017预设,与使用“transform-async-to-generator”插件相同。这就是我在.babelrc文件中的内容:
{
"presets": [
"es2017",
"react",
"stage-0"
],
"plugins": [
"react-hot-loader/babel",
"transform-async-to-generator",
"transform-class-properties",
["import", { "libraryName": "antd", "style": "css" }]
]
}
这是我的eslint配置。关于eslint讨论,他们说这是更多babel-eslint问题,虽然我已经添加了parserOptions ecmaVersion = 2017:
module.exports = {
root: true,
parser: 'babel-eslint',
// import plugin is termporarily disabled, scroll below to see why
plugins: [/*'import', */'flowtype', 'jsx-a11y', 'react'],
env: {
browser: true,
commonjs: true,
node: true
},
parserOptions: {
ecmaVersion: 2017,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
generators: true,
experimentalObjectRestSpread: true
}
},
settings: {
'import/ignore': [
'node_modules',
'\\.(json|css|jpg|png|gif|eot|svg|ttf|woff|woff2|mp4|webm)$',
],
'import/extensions': ['.js'],
'import/resolver': {
node: {
extensions: ['.js', '.json']
}
}
},
rules: { ... }
};
并打包json依赖项:
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.13.2",
"babel-eslint": "^6.1.2",
"babel-plugin-transform-async-to-generator": "^6.24.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.12.0",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "^6.13.2",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.24.1",
"coveralls": "^2.11.12",
"eslint": "^3.2.2",
"eslint-config-airbnb": "^10.0.0",
"eslint-plugin-react": "^6.0.0",
"ignore-styles": "^4.0.0",
"istanbul": "^1.0.0-alpha.2",
"mocha": "^3.0.2",
"nock": "^8.0.0",
"react-addons-test-utils": "^15.3.0",
"react-scripts": "0.2.1",
"redux-mock-store": "^1.1.2",
"redux-saga-devtools": "^0.1.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"enzyme": "^2.4.1",
"eslint-plugin-flowtype": "^2.39.1",
"eslint-plugin-jsx-a11y": "^6.0.2",
"expect": "latest",
"isomorphic-fetch": "^2.2.1",
"jsdom": "^9.9.1",
"lodash": "^4.17.4",
"nuka-carousel": "^2.3.0",
"pushstate-server": "latest",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-redux": "^4.4.5",
"react-router": "^2.6.0",
"react-router-redux": "^4.0.8",
"react-sidebar": "^2.3.2",
"redux": "^3.6.0",
"redux-logger": "3.0.1",
"redux-saga": "^0.14.3"
},
会不会感谢任何可能出错的提示?
答案 0 :(得分:1)
我没有运行代码,但您未正确声明initialGetProduct
功能。应该是
async initialGetProduct() {...
答案 1 :(得分:1)
所以这个问题与我想象的有点不同。我使用react脚本来启动我的应用程序,我的错误是我认为我在项目中的配置(我不是最初启动它的人)已被某种方式使用。但事实并非如此。因此,我必须做的就是更新react-scripts版本。它是0.2.1,现在它是^ 1.0.17,难怪它无法与ES8一起工作...... 很抱歉给所有试图帮助的人带来不便,谢谢大家,你的建议教会了我很多。 在react-scripts配置中,他们只有这个用于babel:
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
cacheDirectory: true,
},
},