Property body[42] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"

[dev-esoftplay]

Summary

Failed building JavaScript bundle.
node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js: Property body[42] of BlockStatement expected node to be of a type ["Statement"] but instead got "AssignmentExpression"

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

iOS

SDK Version (managed workflow only)

42

Environment

Expo CLI 4.9.1 environment info:
System:
OS: macOS 11.5.1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.4 - /usr/local/bin/node
Yarn: 1.22.5 - ~/.yarn/bin/yarn
npm: 6.14.14 - /usr/local/bin/npm
Watchman: 2021.06.07.00 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.10.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
Android SDK:
API Levels: 29, 30, 31
Build Tools: 28.0.3, 29.0.2, 31.0.0
System Images: android-30 | Google Play ARM 64 v8a
IDEs:
Android Studio: 2020.3 AI-203.7717.56.2031.7583922
Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
npmPackages:
expo: ~42.0.1 => 42.0.3
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz => 0.63.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 4.9.1
Expo Workflow: managed

Reproducible demo or steps to reproduce from a blank project

expo init test
cd test
npm start

[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

[byCedric]

This issue should be resolved in @babel/plugin-transform-react-display-name@7.15.1. Make sure you are using the right version:

1. Check your installed version:
   • $ yarn why @babel/plugin-transform-react-display-name (for yarn)
   • $ npm ls @babel/plugin-transform-react-display-name (for npm)
2. If you are using 7.15.1 or higher, this issue should be resolved.
3. If you are using 7.15.0, remove your node modules and lockfiles
   • $ npx rimraf node_modules
   • $ npx rimraf yarn.lock / $ npx rimraf package-lock.json
   • $ yarn install / $ npm install
4. Start React Native or Expo and reset the caches
   • $ expo start --clear (for Expo)
   • $ yarn start --reset-cache (for React Native)

If you still run into issues, try clearing the Metro cache in a more aggressive way. To prevent these types of issues in the future, specific React Native tests are being added to Babel.

Sorry for the inconvenience and hope this helps!