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

[amadeuszblanik]

Expected results

Run react native template

Observed results

Cannot run blank application created just after created it (npx react-native init MyApp --template react-native-template-typescript).

Logs

> react-native start

                                                      
                        #######                       
                   ################                   
                #########     #########               
            #########             ##########          
        #########        ######        #########      
       ##########################################     
      #####      #####################       #####    
      #####          ##############          #####    
      #####    ###       ######       ###    #####    
      #####    #######            #######    #####    
      #####    ###########    ###########    #####    
      #####    ##########################    #####    
      #####    ##########################    #####    
      #####      ######################     ######    
       ######        #############        #######     
         #########        ####       #########        
              #########          #########            
                  ######### #########                 
                       #########                      
                                                      
                                                      
                    Welcome to Metro!
              Fast - Scalable - Integrated



To reload the app press "r"
To open developer menu press "d"

 BUNDLE  ./index.js 

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"
 BUNDLE  ./index.js 

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

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

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"
info Opening developer menu...
 BUNDLE  ./index.js 

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"

Steps to reproduce

1. Initialise repository
2. Try to runnit

OS: macOS 11.4
Hardware MacBook Pro 15-inch, 2019 (2.3 GHz 8-Core Intel Core i9, 32 GB 2400 MHz DDR4, Radeon Pro Vega 20)
Xcode: Version 12.5.1 (12E507)
NodeJS: v14.17.0

[codeZoner]

Same issue on MacBook Pro (15-inch, 2018) Processor Name: 6-Core Intel Core i7 Processor Speed: 2.2 GHz
Running on macOS Big Sur

XCode - Version 12.5.1 (12E507)
Node - v14.15.0

Tried to do basic installation stated at https://reactnative.dev/docs/environment-setup

Steps to Reproduce

Step 1: npm install -g expo-cli

Step 2: expo init AwesomeProject

Step 4: cd into the folder

Step 5: expo start

Step 6: Select iOS Simulator on the Browser

In the terminal, getting the following error -

Logs for your project will appear below. Press Ctrl+C to exit. 

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"

This is the screenshot in the Expo Go App on the Simulator

[joshua-augustinus]

It occurs due to a babel update:
facebook/react-native#31961

[LuisEgan]

I had this problem in an expo (v42) app and I went back in my git log these were the dependencies versions that worked. Hope this helps someone

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll",
    "lint": "eslint src/**/*.{ts,tsx} --fix --no-error-on-unmatched-pattern",
    "lint:noFix": "eslint src/**/*.{ts,tsx} --no-error-on-unmatched-pattern",
    "build:android": "expo build:android",
    "prettier": "prettier --write src/**/*.{ts,tsx} __tests__/**/*.{ts,tsx}"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@apollo/client": "^3.4.3",
    "@apollo/react-hooks": "^4.0.0",
    "@expo/vector-icons": "^12.0.0",
    "@react-native-async-storage/async-storage": "^1.15.5",
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/bottom-tabs": "5.11.2",
    "@react-navigation/native": "~5.8.10",
    "@react-navigation/stack": "~5.12.8",
    "expo": "~42.0.1",
    "expo-asset": "~8.3.2",
    "expo-constants": "~11.0.1",
    "expo-font": "~9.2.1",
    "expo-linear-gradient": "~9.2.0",
    "expo-linking": "~2.3.1",
    "expo-permissions": "^12.1.1",
    "expo-splash-screen": "~0.11.2",
    "expo-status-bar": "~1.0.4",
    "expo-web-browser": "~9.2.0",
    "graphql": "^15.5.1",
    "native-base": "^3.0.7",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-hook-form": "^7.12.2",
    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-reanimated": "~2.2.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.4.0",
    "react-native-svg": "12.1.1",
    "react-native-web": "~0.13.12",
    "styled-components": "^5.3.0",
    "styled-system": "^5.1.5"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/eslint-plugin": "^7.14.5",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "@typescript-eslint/eslint-plugin": "^4.29.0",
    "@typescript-eslint/parser": "^4.29.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-react-native": "^4.1.0",
    "eslint-plugin-flowtype": "^5.9.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-react-native": "^3.11.0",
    "husky": "^7.0.1",
    "jest-expo": "~41.0.0-beta.0",
    "lint-staged": "^11.1.1",
    "prettier": "^2.3.2",
    "typescript": "~4.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged --allow-empty"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": [
      "prettier --write",
      "yarn run lint:fix",
      "yarn run lint"
    ]
  }
}

[carlosq-ordering]

I got the same issue

[mrmuke]

I found a solution.

Download @babel from here:
https://drive.google.com/file/d/1-z_4H_z4x075unZqZD41WYUwY_hsrKox/view

And replace the @babel folder in node_modules

[Harry-supercode]

hi guys, same problem I had this problem while building App. I can't figure out how to fix it, can someone here help me?

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"

[Anmolnoor]

same Issue!!

Just Copy @babel from an old project...

[Masfiq]

Same problem here . I am using windows 10

[amadeuszblanik]

I found a solution.

Download @babel from here:
https://drive.google.com/file/d/C3NZ0R3D/view

And replace the @babel folder in node_modules

Guys! I would recommend to not download any modules outside npm! This bug should be fixed already according to other issues. I'll check more later today. Probably it was babel issue.

[gabacode]

Try this solution , works for me!

[Masfiq]

@gabacode I did not understand the solution as I am new to react native

[gabacode]

@gabacode I did not understand the solution as I am new to react native

You need to add babel "resolutions" to your package.json file

Example:

{
  "main": "index.js",
  "dependencies": {
    "expo": "~42.0.1",
    "react-native": "~0.63.4",
  },
  "resolutions": {
    "@babel/plugin-transform-react-display-name": "7.14.5"
  },
  "private": true
}

[Masfiq]

Thank you very much @gabacode . It's working now after replacing the @babel folder

[carlosq-ordering]

@gabacode I did not understand the solution as I am new to react native

You need to add babel "resolutions" to your package.json file

Example:

{
  "main": "index.js",
  "dependencies": {
    "expo": "~42.0.1",
    "react-native": "~0.63.4",
  },
  "resolutions": {
    "@babel/plugin-transform-react-display-name": "7.14.5"
  },
  "private": true
}

This works for me, thanks

[Sparkmasterflex]

I def solved this by doing the following steps:

1. remove all ^ from babel packages
2. add this to package.json

  "resolutions": {
    "@babel/plugin-transform-react-display-name": "7.14.5"
  },

3. rm -rf node_modules
4. rm -f package-lock.json file
5. npm install and start it up
6. hold breath as it builds

thanks @gabacode for the help on this!

[dev-lusaja]

I def solved this by doing the following steps:

1. remove all ^ from babel packages
2. add this to package.json

  "resolutions": {
    "@babel/plugin-transform-react-display-name": "7.14.5"
  },

1. rm -rf node_modules
2. rm -f package-lock.json file
3. npm install and start it up
4. hold breath as it builds

thanks @gabacode for the help on this!

This work for me 🥳

[emin93]

Closing this issue here as this is not an issue in the template. For the current status on this issue, please refer to: facebook/react-native#31960