React native Question posted in
The official React Native documentation can be found here.

"error: Error: 1:183:invalid expression" React Native Metro Bundle Hermes Error

Got the following metro bundling error (both for iOS and Android) after starting migration from React Native 0.66.0 to React Native 0.71.4 using this tool https://react-native-community.github.io/upgrade-helper/?from=0.66.0&to=0.71.4

enter image description here

error: Error: 1:183:invalid expression
    at module.exports.compile (/Users/nezort11/dev/walnuts/node_modules/metro-hermes-compiler/src/index.js:107:15)
    at _getPrelude (/Users/nezort11/dev/walnuts/node_modules/metro/src/lib/getPrependedScripts.js:99:21)
    at getPrependedScripts (/Users/nezort11/dev/walnuts/node_modules/metro/src/lib/getPrependedScripts.js:66:5)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async IncrementalBundler.buildGraph (/Users/nezort11/dev/walnuts/node_modules/metro/src/IncrementalBundler.js:147:21)
    at async /Users/nezort11/dev/walnuts/node_modules/metro/src/IncrementalBundler.js:181:34
    at async IncrementalBundler.initializeGraph (/Users/nezort11/dev/walnuts/node_modules/metro/src/IncrementalBundler.js:198:24)
    at async build (/Users/nezort11/dev/walnuts/node_modules/metro/src/Server.js:678:35)
    at async Server.requestProcessor [as _processBundleRequest] (/Users/nezort11/dev/walnuts/node_modules/metro/src/Server.js:587:18)
    at async Server._processRequest (/Users/nezort11/dev/walnuts/node_modules/metro/src/Server.js:397:9)

Packages:

"dependencies": {
    "@apeswapfinance/sdk": "git+https://github.com/fusmanii/apeswap-sdk.git\#canary",
    "@dillionverma/react-native-swipe-button": "^1.1.3",
    "@ethersproject/shims": "^5.7.0",
    "@gorhom/bottom-sheet": "^4",
    "@json-rpc-tools/utils": "^1.7.6",
    "@metamask/eth-sig-util": "^4.0.1",
    "@rainbow-me/animated-charts": "https://github.com/bhowmikp/react-native-animated-charts",
    "@react-native-async-storage/async-storage": "^1.15.16",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/netinfo": "^11.3.2",
    "@react-native-firebase/app": "^14.11.0",
    "@react-native-firebase/auth": "^14.11.0",
    "@react-native-firebase/messaging": "^14.11.0",
    "@react-native-masked-view/masked-view": "^0.2.6",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "@react-navigation/stack": "^6.1.1",
    "@squirrelswap/sdk": "^1.0.1",
    "@tradle/react-native-http": "^2.0.0",
    "@types/react-csv": "^1.1.3",
    "@walletconnect/react-native-compat": "^2.13.1",
    "@walletconnect/web3wallet": "^1.12.0",
    "assert": "^1.1.1",
    "asyncstorage-down": "^4.2.0",
    "axios": "^0.24.0",
    "bignumber.js": "^9.0.2",
    "bip39": "^3.0.4",
    "browserify-zlib": "~0.1.4",
    "buffer": "^4.9.1",
    "console-browserify": "^1.1.0",
    "constants-browserify": "^1.0.0",
    "decimal.js": "^10.3.1",
    "dns.js": "^1.0.1",
    "domain-browser": "^1.1.1",
    "ethereumjs-wallet": "^1.0.2",
    "ethers": "^5.7.2",
    "events": "^3.3.0",
    "fast-text-encoding": "^1.0.6",
    "formik": "^2.2.9",
    "https-browserify": "~0.0.0",
    "intl": "^1.2.5",
    "jetifier": "^2.0.0",
    "jwt-decode": "^3.1.2",
    "levelup": "^5.1.1",
    "libphonenumber-js": "^1.9.43",
    "link-check": "https://github.com/boillodmanuel/link-check",
    "paraswap-core": "^1.0.2",
    "patch-package": "^6.4.7",
    "path-browserify": "0.0.0",
    "postinstall-postinstall": "^2.1.0",
    "punycode": "^1.2.4",
    "querystring-es3": "~0.2.0",
    "react": "18.2.0",
    "react-native": "0.71.4",
    "react-native-animated-styles": "^0.9.0",
    "react-native-autolink": "^4.0.0",
    "react-native-avoid-softinput": "^2.4.8",
    "react-native-base64": "^0.2.1",
    "react-native-camera": "^4.2.1",
    "react-native-console-time-polyfill": "^1.2.3",
    "react-native-countdown-component": "^2.7.1",
    "react-native-create-thumbnail": "^2.0.0",
    "react-native-crypto": "^2.1.0",
    "react-native-device-info": "^8.7.0",
    "react-native-directory-picker": "^0.0.2",
    "react-native-document-picker": "^7.1.0",
    "react-native-dotenv": "^3.3.0",
    "react-native-elements": "4.0.0-rc.2",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-fast-image": "^8.6.3",
    "react-native-gesture-handler": "2.9.0",
    "react-native-get-random-values": "^1.7.2",
    "react-native-haptic-feedback": "^1.13.0",
    "react-native-image-colors": "^1.5.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-keychain": "^8.0.0",
    "react-native-level-fs": "^3.0.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-os": "^1.0.1",
    "react-native-pager-view": "^5.4.17",
    "react-native-permissions": "^3.3.1",
    "react-native-progress": "^5.0.0",
    "react-native-qrcode-scanner": "^1.5.5",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-randombytes": "^3.0.0",
    "react-native-raw-bottom-sheet": "^2.2.0",
    "react-native-reanimated": "^2.14.3",
    "react-native-redash": "^16.2.3",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.7.2",
    "react-native-skeleton-placeholder": "^5.0.0",
    "react-native-svg": "^12.3.0",
    "react-native-svg-flagkit": "^0.9.5",
    "react-native-swipeout": "^2.3.6",
    "react-native-tab-view": "^3.1.1",
    "react-native-tcp": "^3.2.1",
    "react-native-udp": "^2.1.0",
    "react-native-vector-icons": "^9.0.0",
    "react-native-video": "https://github.com/MatrixFrog/react-native-video#11ca8a6799f932a5f24da85dfe68c696ad13a753",
    "react-native-webview": "^13.8.6",
    "readable-stream": "1.0.33",
    "rn-biometric-authentication": "^1.0.2",
    "rn-fetch-blob": "^0.12.0",
    "rn-nodeify": "^10.3.0",
    "rn-swipe-button": "^1.3.6",
    "shamirs-secret-sharing-ts": "^1.0.2",
    "stream": "^0.0.2",
    "stream-browserify": "^1.0.0",
    "string_decoder": "~0.10.25",
    "tailwind-rn": "^3.0.1",
    "tailwindcss": "^2.2.15",
    "timers-browserify": "^1.0.1",
    "tty-browserify": "0.0.0",
    "url": "~0.10.1",
    "util": "~0.10.3",
    "uuid": "^8.3.2",
    "vm-browserify": "0.0.4",
    "wallet-address-validator": "^0.2.4",
    "webview": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.21.0",
    "@babel/helper-get-function-arity": "^7.16.7",
    "@babel/plugin-proposal-decorators": "^7.18.6",
    "@babel/preset-env": "^7.20.0",
    "@babel/preset-typescript": "^7.17.12",
    "@babel/runtime": "^7.21.0",
    "@types/jest": "^29.2.1",
    "@types/react": "^18.0.24",
    "@types/react-native": "^0.71.4",
    "@types/react-native-base64": "^0.2.0",
    "@types/react-native-countdown-component": "^2.7.0",
    "@types/react-native-video": "^5.0.13",
    "@types/react-test-renderer": "^18.0.0",
    "@types/uuid": "^8.3.4",
    "@typescript-eslint/eslint-plugin": "4.31.2",
    "@typescript-eslint/parser": "4.31.2",
    "@walletconnect/jsonrpc-types": "^1.0.4",
    "babel-jest": "^26.6.3",
    "eslint": "^7.14.0",
    "eslint-config-prettier": "8.3.0",
    "eslint-plugin-prettier": "3.4.0",
    "eslint-plugin-react": "^7.26.0",
    "eslint-plugin-react-native": "^3.11.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.73.8",
    "prettier": "^2.4.1",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "17.0.2",
    "typescript": "^4.8.4"
  },
  "resolutions": {
    "@types/react": "^17",
    "@rainbow-me/animated-charts/**/react-native-gesture-handler": "2.9.0",
    "@rainbow-me/animated-charts/**/react-native-reanimated": "^2.14.3",
    "react-native-gesture-handler": "2.9.0",
    "clipboardy": "3.0.0",
    "@react-native-community/cli-plugin-metro": "^10.2.0"
  },

yarn.lock

  • metro version is 0.73.10
  • metro-hermes-compiler version is 0.73.10

Errors comes from here:
https://github.com/facebook/metro/blob/0.73/0.73.10/packages/metro-hermes-compiler/src/index.js#L131

I still don’t know how is metro-hermes-compiler (which was removed in [email protected]) related to metro when i have hermes disabled:

gradle.properties

# Use this property to enable or disable the Hermes JS engine.
# If set to false, you will be using JSC instead.
hermesEnabled=false

and

Podfile

  use_react_native!(
    # # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => false,
  )
Tags:

2

Answers


  1. 0

    try clearing cache in the metro bundler usin the command npx react-native start --reset-cache. if that doesnt work try updating gradle properties by setting hermesEnabled as false. for ios change it in pod file

    Login or Signup to reply.
  2. 0

    edit the metro.config.js file and replace hermes with terser like this:
    transformer: { ...transformer, minifierPath: 'metro-minify-terser', // Use terser instead of Hermes },

    also try uninstalling metro-hermes-compiler and dlt and install node modules again

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search