CODEWITHSUNDEEP
javascriptreactjsasync-await
oneMoreDeveloper
oneMoreDeveloper

Reputation: 111

Async await gives syntax error when used in React component

I am trying to write a basic react app with hapi.js on server-side. I am pretty new to using webpack and babel. My react component App.jsx is as follows:

import React from 'react';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            response: ''
        };
    }

  componentDidMount() {
      this.callApi()
      .then(res => this.setState({ response: res }))
      .catch(err => console.log(err));
  }

  /* Calling hapi.js api endpoint */
  const callApi = async () {  
      const response = await fetch('/list-repos');
      const body = await response.json();

      if (response.status !== 200) throw Error(body.message);

      return body;
  }

  render() {
      return (
          <div style={{textAlign: 'center'}}>
          <h1>Hello World</h1>
          <p className="App-intro">{this.state.response}</p>
          </div>);
      }
}

export default App;

Package.json

{
    "name": "client",
    "version": "1.0.0",
    "main": "index.js",
    "license": "MIT",
    "scripts": {
      "start": "webpack-dev-server"
    },
    "dependencies": {
      "babel-plugin-syntax-async-functions": "^6.13.0",
      "babel-plugin-transform-async-to-generator": "^6.24.1",
      "babel-plugin-transform-regenerator": "^6.26.0",
      "html-webpack-plugin": "^2.30.1",
      "path": "^0.12.7",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "webpack": "^3.11.0",
      "webpack-dev-server": "^2.11.1"
  },
 "devDependencies": {
   "babel-core": "^6.26.0",
   "babel-loader": "^7.1.2",
   "babel-preset-es2015": "^6.24.1",
   "babel-preset-react": "^6.24.1"
 },
 "proxy": "http://localhost:3000/"
}

.babelrc

{
    "presets":[
       "es2015", "react"
    ],

    "plugins": ["transform-regenerator",
            "syntax-async-functions",
            "transform-async-to-generator"]

 }

I keep getting the following error when I start the server using "yarn start"

ERROR in ./src/components/App.jsx
Module build failed: SyntaxError: Unexpected token (21:8)

  19 |   }
  20 | 
> 21 |   const callApi = async () {
     |         ^
  22 |     const response = await fetch('/list-repos');
  23 |     const body = await response.json();
  24 | 

  @ ./src/index.js 11:11-42
  @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
  Child html-webpack-plugin for "index.html":
    1 asset
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 531 bytes {0} [built]
   [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
   [2] (webpack)/buildin/global.js 509 bytes {0} [built]
   [3] (webpack)/buildin/module.js 517 bytes {0} [built]
   webpack: Failed to compile.

I have tried using babel plugins to transform async await code but doesn't seem to be working. Does anyone what I am doing wrong?

Upvotes: 4

Views: 2798

Answers (2)

Seth Holladay
Seth Holladay

Reputation: 9539

You have:

async () {
    // ...
}

But it should be:

async () => {
    // ...
}

Further, you'll need to take that out of the class declaration. Right now, you're trying to declare it as a property or method on the class, but class method declarations don't use const or assignments like that. So just move it up before the class is declared.

const callApi = async () => {
    // ...
};
export default class App extends React.Component {
    // ...
}

Upvotes: 0

godsenal
godsenal

Reputation: 387

async callApi() {
...
}

callApi = async function() {
...
}

you must not use const in front of class member function.

Upvotes: 2

Related Questions