`The 'async' modifier can only be used in TypeScript files.ts(8009)` error when using async in react.js

Question

So when I try to add async/await in the react file, I got this error:

The 'async' modifier can only be used in TypeScript files.ts(8009)

Does that mean I cannot use async/await in React or that is a problem of vs code or what can I do to enable it?

Here is the whole file:

import React from 'react'
import Button from 'react-bootstrap/Button'
import {addOrder} from '../actions/orderAction'
import {connect} from 'react-redux'

class Dish extends React.Component{

    async handleClick = (dish) =>{
     this.props.addOrder(dish)
     localStorage.setItem("order", this.props.order)
     alert(`${dish.name} added to your order!`)
    }


    render(){
      let dish = this.props.dish  
        return(
        <div className="col-4">  
            <img />
            <h5>{dish.name}         ${dish.price}</h5>
            <Button onClick = {()=>this.handleClick(dish)} size="sm" variant="primary">Order</Button> 
        </div>
    )
  }
}

const mapDispatchToProps = dispatch =>{
    return {
        addOrder: (dish) =>dispatch(addOrder(dish))
    }
}

const mapStateToProps = state =>{
    return{
        order: state.order
    }
}


export default connect(null,mapDispatchToProps)(Dish)

Thanks!

score 24 · Accepted Answer · edited May 22 '20 at 23:27

24

You can try either

async handleClick(dish) {
  this.props.addOrder(dish)
  localStorage.setItem("order", this.props.order)
  alert(`${dish.name} added to your order!`)
}

OR

handleClick = async(dish) => {
  this.props.addOrder(dish)
  localStorage.setItem("order", this.props.order)
  alert(`${dish.name} added to your order!`)
}

edited May 22 '20 at 23:27

answered Apr 08 '20 at 15:20

Abdul Mateen Shaikh

290
1
5

1

I fixed the problem with the second solution before. But thanks for your answer anyways! – Yingqi Apr 11 '20 at 22:19
With `handleClick = async () => e => { e.preventDefault()...` I get `Warning: Expected `onClick` listener to be a function, instead got a value of `object` type.`. handleClick is called from a btn: ` – Timo Jan 12 '23 at 09:11
@Timo if you are using react, you are not supposed to invoke click handler – Abdul Mateen Shaikh Jan 12 '23 at 10:32

score 2 · Answer 2 · answered Mar 29 '20 at 17:45

2

H\ve you tried this in settings.json

"javascript.validate.enable": true

answered Mar 29 '20 at 17:45

Jon Jones

1,014
1
9
17

Hi Jon! Where can I find settings.json? I searched for it but don't see it in my file anywhere – Yingqi Mar 29 '20 at 18:16
I'm assuming it is a linting error. if you use vs code it should be within the .vs folder. you can create one called settings.json and then: { "javascript.validate.enable": true } – Jon Jones Mar 29 '20 at 20:15
I found it thanks! Then I add that to it, combined with what it originally looks like, now it looks like: ``` { "prettier.semi": true, "javascript.validate.enable": true } But still it gave me that error, what should I do? ``` – Yingqi Mar 29 '20 at 22:45

kartick shaw · Answer 3 · 2021-04-02T07:16:31.267

For normal functions we put async keyword right before function name

async handleClick(dish) {   this.props.addOrder(dish)  
 localStorage.setItem("order", this.props.order)   alert(`${dish.name}
 added to your order!`) }

For lambda function we put aync keyword right before argument

 handleClick = async (dish) =>{
     this.props.addOrder(dish)
     localStorage.setItem("order", this.props.order)
     alert(`${dish.name} added to your order!`)
    }

`The 'async' modifier can only be used in TypeScript files.ts(8009)` error when using async in react.js

3 Answers3