Possible Unhandled Promise Rejection (id: 0): Error: "getLoginData" is read-only

Question

Destructuring from props is not working inside an async function while it's working fine if I use it using this.props.

This is for a react-native app already in production which suddenly started giving this error 2 days back. I've tried upgrading babel using this

But no success so far.

If I use this.props.getLoginData instead, it works fine

If I use following function, it's erroneous:

yo = async () => { // with async
  const { getLoginData } = this.props; // error
};

While the following function works fine:

yo = () => { // without async
  const { getLoginData } = this.props;
  console.log(getLoginData); // works fine
};

This also works fine:

yo = async () => { // with async
  console.log(this.props.getLoginData); // works fine
};

I expect both of the scenarios to run fine.

Please clone and run this repo to reproduce this bug.

Please find the steps to run the project and environment info in README.md.

P.S.: You will find the error in console( Press ⌘⌥I )

Answer 1

It looks like a dependency of babel is the cause of the issue in my case.

When I look in my package-lock.json, and search for plugin-transform-regenerator I see version 7.4.5. Locking the version to 7.4.4 by adding it to my package.json allows me to build without issue.

This problem would have been easier to track down if I was not ignoring my package-lock.json.

In summary,

npm i -E @babel/[email protected]