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

[wdamien]

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

[enrickpb]

Same here

[amadeuszblanik]

Same here

[Revolt9k]

Released in @babel/plugin-transform-react-display-name@7.15.1: https://www.npmjs.com/package/@babel/plugin-transform-react-display-name/v/7.15.1

Still facing the same issue, updating plugin to 7.15.1 doesnt help.
Dont sure you can reproduce it on linux, you needs Mac to make a build on Xcode to reproduce the issue.

[nicolo-ribaudo]

@Revolt9k Can you share your lockfile?

[Revolt9k]

@nicolo-ribaudo Lockfile is too long to put it here, so I had to upload it in readme file in empty repository. You can check it there - https://github.com/Revolt9k/lockfile

[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 :)

[sammy-SC]

We'll try to reland this change making sure that it doesn't break. I never used React Native: is there an example app or a command I can run on Linux to reproduce the error?

@nicolo-ribaudo you can follow https://reactnative.dev/docs/environment-setup to create and build a project. If the error happens on Android, you should be able to repro on Linux as well. If it happens on iOS only, you will need MacOS.

[kelset]

@sammy-SC yeah the error happens at the Metro step so the Babel team should be even able to get a "small footprint" CI setup for their workflow that is able to catch these kind of issues in the future: babel/babel#13639

[Revolt9k]

Thank you guys, reseting Metro cache finally fixes the issue. You are amazing <3.

[SaeedPoureshghi]

I have still problem.
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"

[NicolasFelippe]

Thanks for this solution, for people who still have the problem, make sure you are following the step by step of the friend from above.

@kelset

[vmarcel]

After applying the fix I get a new issue.

error: index.js: .env["development"].plugins[0][1] must be an object, false, or undefined

Should I just scrap it and create a new project?

[PedRonald]

resolvi segue a solução:

digita dentro do seu projeto:

npm update @babel/plugin-transform-react-display-name

após finalizar a atualização, so dar npx react-native run-android e seja feliz

[safaiyeh]

Closing as the team got a resolution for this.