Using async await on ReactJS with Babel leads to Error: Unexpected token

Question

Wanted to use ES8 async/await for my project. Have been using it recently on ReactNative with Expo so didn't expect any problems on ReactJS. Although, the app can't build now... This is the error I get:

    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));

This is the Component, I have cut most of it's contents as I doubt they could be related to the issue:

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() { ... }
}

I have tried setting es2017 preset in babel configuration, same as using "transform-async-to-generator" plugin. This is what I have in .babelrc file:

{
  "presets": [
    "es2017",
    "react",
    "stage-0"
  ],
  "plugins": [
    "react-hot-loader/babel",
    "transform-async-to-generator",
    "transform-class-properties",
    ["import", { "libraryName": "antd", "style": "css" }]
  ]
}

This is my eslint configuration. On eslint discussion they said this is more babel-eslint issue although I've added 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: { ... }
};

and package json dependencies:

"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"
},

Would appreciate any hint what can be wrong?

I believe you need the **[transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/)** Babel plugin — Wing, Nov 28 '17 at 17:59
have added it to dev dependencies and to babelrc plugins but unfortunately it didn't help — Kirill Stiopin, Nov 28 '17 at 18:04
What is the exact error with `async initialGetProduct()`? It can't be the same exact error since there is no arrow. — ReyHaynes, Nov 28 '17 at 18:10
error is the same although it points to another place of the row (because no arrow anymore) http://prntscr.com/hgge4i — Kirill Stiopin, Nov 28 '17 at 18:17
**"have added it to dev dependencies and to babelrc plugins but unfortunately it didn't help"** – are you sure you have configured `.babelrc` correctly? Your plugin list has `"babel-plugin-transform-class-properties"` however this needs to be `"transform-class-properties"`. — Wing, Nov 28 '17 at 21:15
> Looks like async/await is only available in `babel-preset-stage-3` https://stackoverflow.com/a/35758396/213550 and you have a `stage-2` in dependencies — VMAtm, Nov 28 '17 at 21:33
@VMAtm: using `stage-2` will include presets for `stage-3` and `stage-4` ([reference](https://babeljs.io/docs/plugins/preset-stage-2/)) – a stage preset will include all stages greater than itself. Also OP has the ES2017 preset which includes covers the functionality they need since it includes the `transform-async-to-generator` Babel plugin ([reference](https://babeljs.io/docs/plugins/preset-es2017)). However your comment has led to this important note for OP: `stage-0` is configured as a preset however dev dependencies has `stage-2` – this dependency mismatch needs to be resolved. — Wing, Nov 28 '17 at 22:03
Also one can try `const initialGetProduct = async (productId) => { ...` — VMAtm, Nov 29 '17 at 00:26
@wing: have fixed plugin name in .babelrc to `"transform-class-properties"` and installed `stage-0` instead of `stage-2` but still getting the same error; @VMAtm: tried using const but it didn't work either — Kirill Stiopin, Nov 29 '17 at 09:57
`transform-class-properties` is definitely the plugin required. `stage-0` preset includes that plugin. If including either of these fails to work it's an issue with your `.babelrc` – I've heard some chat that ordering is important, but I won't be spending time in investigating this avenue further. In your presets you can include the [`react-app` preset](https://www.npmjs.com/package/babel-preset-react-app) which will cover all bases (it uses the following presets: [`env`](https://babeljs.io/docs/plugins/preset-env) targeting >=IE9 and [`react`](https://babeljs.io/docs/plugins/preset-react)). — Wing, Nov 29 '17 at 11:43
Forgot to add to my previous comment. Including the `react-app` preset means you can remove the `esXXXX` presets since they are covered by the `env` preset; you can also remove `transform-class-properties` since it is included in the `react-app` preset (as well as `transform-async-to-generator` and `transform-runtime`); you can remove the `stage-0` preset if you are only using the `stage-X` preset for `transform-class-properties` since it is already included, as mentioned previously. — Wing, Nov 29 '17 at 12:23

score 1 · Answer 1 · answered Nov 28 '17 at 17:52

1

I didn't run the code, but you're declaring the initialGetProduct function incorrectly. Should be

async initialGetProduct() {...

answered Nov 28 '17 at 17:52

xavdid

5,092
3
20
32

1

and what if I want an async arrow function? And the error remains the same. – Kirill Stiopin Nov 28 '17 at 17:52

score 1 · Accepted Answer · answered Nov 29 '17 at 15:35

So the problem was in little bit different area than I thought. I'm using react-scripts to start my app and my mistake was that I thought that configuration that I have in my project (I'm not the one who started it initially) has been used somehow. But it wasn't. So all I had to do to make this work is to update react-scripts version. It was 0.2.1 and now it's ^1.0.17, no wonder it couldn't work with ES8... Sorry for any inconvenience to everyone who tried to help, thank you all, your advices taught me much. In react-scripts config they have only this for 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,
            },
          },

Using async await on ReactJS with Babel leads to Error: Unexpected token

2 Answers2