await is a reserved word error in ReactJS

Question

I'm new to ReactJS and I have used simple-oauth to connect to a test API. I have added the client id, client secret, username and password as well as the oauth token url. I'm getting syntax error await is a reserved word (40:21)

Below is my current code which is a sample from simple-oauth:-

const credentials = {
  client: {
    id: "CLIENT_ID",
    secret: "CLIENT_SECRET"
  },
  auth: {
    tokenHost: "http://localhost/oauth/token"
  }
};

const oauth2 = require('simple-oauth2').create(credentials);

const tokenConfig = {
  username: "USERNAME",
  password: "PASSWORD",
  scope: '<scope>',
};

try {
  const result = await oauth2.ownerPassword.getToken(tokenConfig);
  const accessToken = oauth2.accessToken.create(result);
} catch (error) {
  console.log('Access Token Error', error.message);
}

I also tried async function. Though the error gone, the console log isn't being triggered. Here's the async function code:-

async () => {
  const result = oauth2.ownerPassword.getToken(tokenConfig);
  const accessToken = oauth2.accessToken.create(result);
  // no console.log in the debugger
  console.log(result);
};

What could be wrong in the code? please help.

Possible duplicate of [Await is a reserved word error inside async function](https://stackoverflow.com/questions/42299594/await-is-a-reserved-word-error-inside-async-function) — Sagiv b.g, Sep 30 '18 at 11:50

score 4 · Accepted Answer · answered Sep 30 '18 at 11:55

4

I also tried async function. Though the error gone, the console log isn't being triggered.

Because you didn't call your function. What you need is a Self Invoking Function:

(async () => {
    const result = oauth2.ownerPassword.getToken(tokenConfig);
    const accessToken = oauth2.accessToken.create(result);
    // no console.log in the debugger
    console.log(result);
  })();

answered Sep 30 '18 at 11:55

semanser

2,310
2
15
33

Cool... it's working OK now. thank you so much :) Self Invoking Function is what I need. I learned something useful from you. thanks :) – Catherine Salvador Sep 30 '18 at 12:06

Mohit Mutha · Answer 2 · 2018-09-30T11:59:34.010

0

The lines of code are not getting triggered. You will need to wrap into the async function and call the function from somewhere componentDidMount will be a good place.

const funcName = async () => {
const result = await oauth2.ownerPassword.getToken(tokenConfig);
const accessToken = oauth2.accessToken.create(result);
// no console.log in the debugger
console.log(result);
};

componentDidMount(){
  this.funcName();
}

edited Sep 30 '18 at 11:59

answered Sep 30 '18 at 11:54

Mohit Mutha

2,921
14
25

1

you are missing the `await` keyword which is exactly the mistake the OP made. – Sagiv b.g Sep 30 '18 at 11:55

score 0 · Answer 3 · answered Nov 11 '18 at 00:52

You have to declare the componentWillMount (or componentDidMount) as async in order to use await. You can do that by changing the signature:

async componentWillMount() {

  const result = await oauth2.ownerPassword.getToken(tokenConfig);
  const resultJson = await result.json();
  const accessToken = await oauth2.accessToken.create(resultJson);
  const accessTokenJson = await accessToken.json();

  //if you need
  this.setState({
    accessTokenJson,
  });

  //For debugging
  console.log('result', {resultJson, accessTokenJson});
}

score 0 · Answer 4 · answered Jun 29 '21 at 06:05

handleSubmit = async (e) => {
e.preventDefault();
console.log("form Submit ", this.state);
const { email, password } = this.state;

try {
  const config = {
    "content-type": "application/json",
  };
  this.setState({ loading: true });
  const { data } = await axios.post(
    "/api/users/login",
    {
      email,
      password,
    },
    config
  );
} catch (e) {
  console.error("Error Login!", e);
  this.setState({
    error: e.response.data.message,
  });
}

};

await is a reserved word error in ReactJS

4 Answers4