RN project fails with "Property body[6] of BlockStatement..." (Babel related issue)

EDIT by @kelset: this is caused by a Babel release, read more at this comment. The offending commit has been reverted, as mentioned here - so the issue is solved now. If you are still experiencing it, follow the steps described here.

PLEASE don’t post comments like “same here”, they only create noise

---

When creating a new project via npx react-native init Foo --template react-native-template-typescript, then running the default yarn ios metro throws a compile error:

error: node_modules/react-native/Libraries/Image/ImageAnalyticsTagContext.js: Property body[6] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"

Tested using:

• Typescript 3.9.4 and 4.3.5
• React Native: 0.64.1
• macOS 11.4
• node v14.15.1
• yarn 1.22.10

[brentvatne]

this is a known issue caused by a bug in a newly released version of babel. it will impact all new react-native and expo apps. you can resolve it with yarn resolutions in a new project:

--- a/package.json
+++ b/package.json
@@ -25,5 +25,8 @@
   },
   "jest": {
     "preset": "react-native"
+  },
+  "resolutions": {
+    "@babel/plugin-transform-react-display-name": "7.14.5"
   }
 }

see some discussion here:

• https://twitter.com/notbrent/status/1423152953876176897
• https://twitter.com/notbrent/status/1423153268423790594

[kelset]

@Revolt9k me and @nicolo-ribaudo have just done a pairing session to verify that @babel/plugin-transform-react-display-name version 7.15.1 works correctly.

So, to more completely provide a resolution if you are still experiencing the problem:

1. check your yarn/npm lock file. Remove the lines/section about

"@babel/plugin-transform-react-display-name@^7.0.0":
  version "7.15.0"
  // more lines

1. (optional) remove your node_modules folder
2. do a yarn/npm install. Afterwards, check the yarn / npm lock file. You should see something like this in place:

"@babel/plugin-transform-react-display-name@^7.0.0":
  version "7.15.1" <--- THIS IS THE VERSION YOU NEED TO HAVE
  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.15.1.tgz#6aaac6099f1fcf6589d35ae6be1b6e10c8c602b9"
  integrity sha512-yQZ/i/pUCJAHI/LbtZr413S3VT26qNrEm0M5RRxQJA947/YNYwbZbBaXGDrq6CG5QsZycI1VIP6d7pQaBfP+8Q==
  dependencies:
    "@babel/helper-plugin-utils" "^7.14.5"

1. Now, reset the reset your Metro cache; you can do it in a few ways, the one I use the most is to kill off the running instance, and re-start it via yarn start --reset-cache. You can also do a more complete nuke via rm -rf $TMPDIR/metro-*.

Doing so will ensure that Metro will pick up the correct plugin and things should work again for you too 😃