javascriptreactjsreact-nativemetro-bundlernative-android

Unable to run react-native project on command "npx react-native run-android"


Hi I am working on a react-native project for quite some time and everything was going well until yesterday I started to get an error on command npx react-native run-android in Metro before the project is yet to be completely executed and the error is:

Failed to construct transformer:  Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at stableHash (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro-cache\src\stableHash.js:19:8)
    at Object.getCacheKey (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro-transform-worker\src\index.js:647:7)
    at getTransformCacheKey (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:32:19)
    at new Transformer (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\DeltaBundler\Transformer.js:180:28)
    at C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:58:29 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

And as the project gets 100 percent executed and gets installed in mobile it gives error as this

BUNDLE  ./index.js

error: TypeError: Cannot read properties of undefined (reading 'transformFile')
    at C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:95:34
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:14:24)
    at _next (C:\Users\hp\Downloads\masjid-app\masjid-app\node_modules\metro\src\Bundler.js:36:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I searched it every where but cant find the solution any help, please! Below is my package.JSON file

{
  "name": "mockplus",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@ant-design/icons": "^4.6.2",
    "@babel/preset-env": "^7.14.7",
    "@firebase/analytics": "^0.7.0",
    "@firebase/app": "^0.7.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-community/cli-platform-android": "^5.0.1",
    "@react-native-community/geolocation": "^2.0.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-native-community/push-notification-ios": "^1.10.1",
    "@react-native-community/slider": "^4.1.3",
    "@react-native-firebase/app": "^12.4.0",
    "@react-native-firebase/auth": "^12.4.0",
    "@react-native-firebase/messaging": "^12.4.0",
    "@react-native-picker/picker": "^2.0.0",
    "@react-navigation/bottom-tabs": "^5.11.11",
    "@react-navigation/drawer": "^5.12.5",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "axios": "^0.21.1",
    "brew": "^0.0.8",
    "gradle": "^1.2.4",
    "install": "^0.13.0",
    "lpf": "^1.0.0",
    "npm": "^7.21.0",
    "npm-install-peers": "^1.2.2",
    "react": "^16.14.0",
    "react-dom": "^17.0.2",
    "react-native": "0.64.4",
    "react-native-alarm-notification": "^1.8.0",
    "react-native-circle-checkbox": "^0.1.6",
    "react-native-compass-heading": "^1.2.1",
    "react-native-date-picker": "^4.2.10",
    "react-native-datepicker": "^1.7.2",
    "react-native-easy-grid": "^0.2.2",
    "react-native-element": "^1.2.1",
    "react-native-elements": "^3.4.2",
    "react-native-gesture-handler": "^1.10.3",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-hijri-date-picker-android": "^2.0.0",
    "react-native-image-crop-picker": "^0.36.2",
    "react-native-image-placeholder": "^1.0.14",
    "react-native-looped-carousel": "^0.1.13",
    "react-native-modal": "^12.1.0",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-picker-select": "^8.0.4",
    "react-native-progress": "^5.0.0",
    "react-native-push-notification": "^8.1.1",
    "react-native-read-more-text": "^1.1.2",
    "react-native-reanimated": "^2.2.0",
    "react-native-responsive-screen": "^1.4.2",
    "react-native-safe-area-context": "^3.2.0",
    "react-native-screens": "^3.4.0",
    "react-native-sensors": "^7.3.2",
    "react-native-share": "^7.0.0",
    "react-native-snackbar": "^2.4.0",
    "react-native-sound": "^0.11.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-track-player": "^3.2.0",
    "react-native-tts": "^4.1.0",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^5.1.1",
    "react-native-youtube": "^2.0.2",
    "react-redux": "^7.2.4",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "redux": "^4.1.0",
    "redux-thunk": "^2.3.0",
    "robust-point-in-polygon": "^1.0.3",
    "toggle-switch-react-native": "^3.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "7.14.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.64.0",
    "react-test-renderer": "17.0.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

If you do know the answer please help. Thank you.


Solution

  • so I solved my problem with the help of the question posted below at this link:

    React-native error:0308010C:digital envelope routines::unsupported

    The answer was quite simple I guess, there seems to be some problem with the latest version of nodejs that I have been using which was version 18.16.0 so by taking the reference from the above question in the link I changed my nodejs version to 16.13.0 using nvm and every thing worked like a charm.