Хотел использовать ES8 async/await для своего проекта. Недавно использовал его в 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() { ... }
}
Я попытался установить предустановку es2017 в конфигурации babel, так же, как с помощью плагина «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"
},
Был бы признателен за любую подсказку, что может быть не так?
async initialGetProduct()
? Точно такой же ошибки быть не может, так как стрелки нет. - person ReyHaynes   schedule 28.11.2017.babelrc
? В вашем списке плагинов есть"babel-plugin-transform-class-properties"
, однако это должно быть"transform-class-properties"
. - person Wing   schedule 29.11.2017babel-preset-stage-3
stackoverflow.com/a/35758396/213550, и у вас естьstage-2
в зависимости - person VMAtm   schedule 29.11.2017stage-2
будет включать пресеты дляstage-3
иstage-4
(ссылка) - пресет этапа будет включать все этапы больше, чем он сам. Также у OP есть предустановка ES2017, которая включает в себя необходимые им функции, поскольку включает плагинtransform-async-to-generator
Babel (ссылка а>). Однако ваш комментарий привел к этому важному примечанию для OP:stage-0
настроен как предустановка, однако зависимости разработчиков имеютstage-2
— это несоответствие зависимостей необходимо устранить. - person Wing   schedule 29.11.2017const initialGetProduct = async (productId) => { ...
- person VMAtm   schedule 29.11.2017"transform-class-properties"
и установленоstage-0
вместоstage-2
, но все равно возникает та же ошибка; @VMAtm: пытался использовать const, но это тоже не сработало - person Kirill Stiopin   schedule 29.11.2017transform-class-properties
определенно требуется плагин.stage-0
пресет включает этот плагин. Если включение любого из этих способов не сработает, это проблема с вашим.babelrc
— я слышал некоторые разговоры о том, что порядок важен, но я не буду тратить время на дальнейшее изучение этого пути. В свои пресеты вы можете включитьreact-app
пресет, который будет охватывать все базы (используются следующие предустановки:env
таргетинг ›=IE9 иreact
). - person Wing   schedule 29.11.2017react-app
означает, что вы можете удалить предустановкиesXXXX
, поскольку они покрываются предустановкойenv
; вы также можете удалитьtransform-class-properties
, так как он входит в пресетreact-app
(а такжеtransform-async-to-generator
иtransform-runtime
); вы можете удалить предустановкуstage-0
, если вы используете предустановкуstage-X
только дляtransform-class-properties
, поскольку она уже включена, как упоминалось ранее. - person Wing   schedule 29.11.2017