App compile fails with TypeError: o.default.createNode is not a function

[BrianJVarley]

New Version

0.72.3

Old Version

0.71.12

Build Target(s)

Android device (Pixel 6a) on debug build

Output of react-native info

$ react-native info
info Fetching system and libraries information...
(node:12910) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
System:
  OS: macOS 12.6.2
  CPU: (8) arm64 Apple M1
  Memory: 390.44 MB / 8.00 GB
  Shell:
    version: 5.8.1
    path: /bin/zsh
Binaries:
  Node:
    version: 18.0.0
    path: /var/folders/6c/9vyqcg1904vflvbs81fhd4bw0000gn/T/yarn--1689866324945-0.7441927635391195/node
  Yarn:
    version: 1.22.18
    path: /var/folders/6c/9vyqcg1904vflvbs81fhd4bw0000gn/T/yarn--1689866324945-0.7441927635391195/yarn
  npm:
    version: 9.8.1
    path: ~/Projects/react-native-prototyping/node_modules/.bin/npm
  Watchman:
    version: 2023.01.23.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods: Not Found
SDKs:
  iOS SDK: Not Found
  Android SDK: Not Found
IDEs:
  Android Studio: 4.1 AI-201.8743.12.41.7199119
  Xcode:
    version: /undefined
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 11.0.19
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.3
    wanted: ^0.72.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Issue and Reproduction Steps

I've upgrade my react-native app from version 0.71.12 to 0.72.3 but get this vague runtime error on the Android device after running react-native run-android:

The below snippet is my package.json file defining the dependencies specified in RN upgrade helper

Any help appreciated on how I can dig into the cause of the error further.

{
  "name": "com.chimichurri",
  "version": "1.0.57",
  "private": true,
  "scripts": {
    "android": "adb devices && react-native run-android",
    "check-dependencies": "rnx-align-deps",
    "fix-dependencies": "rnx-align-deps --write"
  },
  "dependencies": {
    "@react-native-clipboard/clipboard": "^1.10.0",
    "@react-native-picker/picker": "^2.4.10",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/native": "^6.0.8",
    "@react-navigation/stack": "^6.2.0",
    "bluebird": "^3.7.2",
    "convert-units": "^2.3.4",
    "event-emitter": "^0.3.5",
    "fbjs": "^3.0.5",
    "immutability-helper": "^3.1.1",
    "immutable": "^4.3.1",
    "lodash": "^4.17.21",
    "memoize-one": "^6.0.0",
    "moment": "^2.29.4",
    "native-base": "^3.4.28",
    "npm": "^9.8.1",
    "polished": "^4.2.2",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "^0.72.3",
    "react-native-awesome-alerts": "^2.0.0",
    "react-native-cli": "^2.0.1",
    "react-native-dismiss-keyboard": "^1.0.0",
    "react-native-elements": "^3.4.3",
    "react-native-floating-label-input": "1.4.2",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-hide-with-keyboard": "^1.2.1",
    "react-native-keyboard-listener": "^1.1.0",
    "react-native-localization": "^2.3.2",
    "react-native-material-initials": "^0.0.12",
    "react-native-paper": "^5.9.1",
    "react-native-popup-menu": "^0.16.1",
    "react-native-reanimated": "^3.3.0",
    "react-native-safe-area-context": "^4.5.1",
    "react-native-screens": "^3.19.0",
    "react-native-svg": "^13.10.0",
    "react-native-swiper": "^1.6.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.19.6",
    "react-navigation": "^4.3.5",
    "react-navigation-material-bottom-tabs": "^2.2.8",
    "react-navigation-redux-helpers": "^4.0.1",
    "react-navigation-stack": "^2.3.9",
    "react-redux": "^8.1.1",
    "react-scripts": "^5.0.1",
    "redux": "^4.2.1",
    "redux-logger": "^3.0.6",
    "redux-loop-symbol-ponyfill": "^2.2.2",
    "redux-promise": "^0.6.0",
    "redux-thunk": "^2.4.2",
    "standard-http-error": "^2.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/runtime": "^7.22.6",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@rnx-kit/align-deps": "^2.2.4",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "babel-jest": "^29.6.1",
    "detox": "^20.11.1",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.7",
    "eslint": "8.45.0",
    "flow-bin": "0.212.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.77.0",
    "react-devtools-core": "^4.28.0",
    "react-test-renderer": "18.2.0",
    "rimraf": "^5.0.1"
  },
  "engines": {
    "node": ">=18"
  },
  "rnx-kit": {
    "kitType": "app",
    "alignDeps": {
      "requirements": [
        "react-native@0.71"
      ],
      "capabilities": [
        "animation",
        "babel-preset-react-native",
        "clipboard",
        "core",
        "core-android",
        "core-ios",
        "gestures",
        "jest",
        "navigation/native",
        "navigation/stack",
        "react",
        "react-dom",
        "react-test-renderer",
        "safe-area",
        "screens",
        "svg"
      ]
    }
  }
}

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[BrianJVarley]

Closing since this build error seems to be related to my configuration of -> react-native-reanimated/plugin

[gmartpad]

@BrianJVarley What was wrong with your configuration of react-native-reanimated/plugin?

[BrianJVarley]

@gmartpad https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

[Shizerq]

For everyone who has this problem:
I spent last 3 days trying to figure it out.
Your app tries to use an old js bundle that is probably stored inside android/app/main/assets.

The real error is underneath this one - your app cannot connect to the Metro server.
In my case, we have a custom network_security_config.xml file, which whitelists these domains

        <domain includeSubdomains="true">127.0.0.1</domain>
        <domain includeSubdomains="true">10.0.0.1</domain>
        <domain includeSubdomains="true">localhost</domain>

After digging deeper I found that my app tried to connect via 10.0.2.2, so simply adding

        <domain includeSubdomains="true">10.0.2.2</domain>

to the list fixed my problems.

[Quintis1212]

@Shizerq Hello, I checked my network_security_config file and there is already <domain includeSubdomains="true">10.0.2.2</domain>
Please tell me how you find this address. I think that my address is a different one

[Shizerq]

@Quintis1212
I've disabled network_security_config and it was somewhere in the Metro logs.
You can also look it up inside the RN Dev Menu

[Quintis1212]

I have fixed the problem, the source of the problem was the metro config, check if your metro config meets requirements:
https://reactnative.dev/docs/metro
https://facebook.github.io/metro/docs/configuration/