Moralis not working in react native 0.64.x and after

Karthi144 · March 16, 2022, 9:49am

Hi,
I tried react-native boilerplate it’s working
But when I try to integrate it into my app I am getting the same error as mentioned above
My project specs:
React Native version. 0.60.6
Moralis version 0.0.99

loekTheDreamer · March 17, 2022, 12:01pm

Hey thank you for your solution.

The problem is that the boilerplate is using web3.js and not ethers.js. we need it to work with ethers.js. And then on top of that i need to implement it on our react-native init app that has already had a lot of development made on it.

moralis says it works with ethers.js so im confused as to why it doesnt.

ibox · March 17, 2022, 12:04pm

so this issue

TypeError: undefined is not an object (evaluating ‘EventEmitter.prototype.addListener’)

is linked to the RN version you guys use? when will it be up to date?
Also, for simple things like a DB call, none of that should be necessary, an API endpoint should be callable via curl theoretically no?

loekTheDreamer · March 17, 2022, 12:08pm

do you have the versions that do work together? because i think there is a way to use different version of react in your react app.

ibox · March 17, 2022, 12:23pm

I don’t know… I am just trying to call the DB, it’s mind boggling to me that it’s that complex…
Here is my package.json

"dependencies": {
    "@expo/vector-icons": "^12.0.0",
    "@hookstate/core": "^3.0.13",
    "@magic-sdk/react-native": "^8.2.0",
    "@react-native-community/async-storage": "^1.12.1",
    "@react-native-firebase/app": "^14.5.0",
    "@react-native-firebase/storage": "^14.5.0",
    "@react-navigation/bottom-tabs": "^6.0.5",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "expo": "~44.0.0",
    "expo-asset": "~8.4.4",
    "expo-constants": "~13.0.0",
    "expo-dev-client": "~0.8.4",
    "expo-document-picker": "~10.1.3",
    "expo-font": "~10.0.4",
    "expo-linking": "~3.0.0",
    "expo-splash-screen": "~0.14.0",
    "expo-status-bar": "~1.2.0",
    "expo-web-browser": "~10.1.0",
    "moralis": "^1.4.0",
    "node-libs-browser": "^2.2.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-moralis": "^1.3.2",
    "react-native": "0.64.3",
    "react-native-progress": "^5.0.0",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "^12.3.0",
    "react-native-track-player": "^2.1.2",
    "react-native-web": "0.17.1",
    "react-native-webview": "^11.17.2",
    "web3": "^1.7.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.64.12",
    "jest": "^26.6.3",
    "jest-expo": "~44.0.1",
    "react-test-renderer": "17.0.1",
    "typescript": "~4.3.5"
  },

loekTheDreamer · March 17, 2022, 12:30pm

thanks i am quickly going to try your react and react native versions and see if i can get it to work on my side.

phyx1u5 · March 17, 2022, 2:15pm

did you every try my solution?
add _ before Event, it should work. just make sure Moralis version is 0.0.99

ibox · March 17, 2022, 2:30pm

hi, I appreciate but the current version is 1.4, I don’t want to use a workaround whereas I am just testing Moralis offer. If s imple DB call needs workarounds then it doesn’t make sense (not that I doubt it will work, but I want something stable)

phyx1u5 · March 17, 2022, 2:39pm

believe me I have spent many hours trying to get latest version to work, but I couldn’t get it working. so for now I’m just using 0.0.99. hopefully the Moralis team update their react native boiler plate for the latest version of Moralis in the near future.

taha · March 17, 2022, 2:44pm

I have requested the team to update the boilerplate code

ibox · March 17, 2022, 3:36pm

agreed with @taha, the team should update the boilerplate. And normally they will find incompatibilities between different lib versions (which is our issue) and fix their SDK cause that’s the root cause.
Also I don’t know if team members like @cryptokid could let them know they should decorelate the Web3 part of the SDK (like Wallet connect) and the Web2 part (like getting data from the Sync Server, events) cause they should not be that tightly coupled…or to provide an API endpoint

gen · March 21, 2022, 8:04am

@talhabinkhalil can you add this postinstall script to your package.json like what we have in the boilerplate?
"postinstall": "node_modules/.bin/rn-nodeify --install crypto,http,https,os,assert,url,stream,events --yarn"

gen · March 21, 2022, 8:10am

@ibox @loekTheDreamer @phyx1u5 I created a PR updating Moralis SDK and React-Native to latest. Can you check and let me know if it works for you?

phyx1u5 · March 21, 2022, 8:55am

thanks Gen I will try it soon, I am developing for android as well, are there any changes required to android files?

ibox · March 21, 2022, 11:15am

Hi, it doesn’t. Did you try it yourself? I already mentioned in Discord that the last version doesn’t fix it

gen · March 21, 2022, 11:40am

@ibox Yes I just created the PR last night. Please try the PR for now and if it works, it will be merged in the main branch.

ibox · March 21, 2022, 1:35pm

still not working in my code, I cleaned the node_modules, Pods, reinstalled everything but still have the issue:

Can't find variable: localStorage
at node_modules/moralis/lib/browser/Storage.js:130:5 in getAllKeysAsync
at http://127.0.0.1:8081/index.bundle?platform=ios&dev=true&hot=false&minify=false:413443:56 in getItemAsync
at node_modules/crypto-js/cipher-core.js:19:1 in <anonymous>
at node_modules/moralis/lib/browser/RESTController.js:348:6 in request
at node_modules/moralis/lib/browser/ParseQuery.js:793:43 in first.then$argument_0
at components/TrackListScreen.js:85:28 in fetchData
at components/TrackListScreen.js:84:22 in fetchData
at components/TrackListScreen.js:89:13 in useEffect$argument_0

gen · March 21, 2022, 1:51pm

If you’re not using the ethereum-react-native-boilerplate, and wish to implement the same to your rn project, you should install: rn-nodeify (get it here: https://www.npmjs.com/package/rn-nodeify). Also create a shim.js file in your project’s root directory like what I did in the boilerplate, and also include the postInstall script in package.json file:

In your package.json file, put this inside scripts:
"postinstall": "node_modules/.bin/rn-nodeify --install crypto,http,https,os,assert,url,stream,events --yarn"

Copy this shim.js file below and put this in your project’s root folder:

github.com

ethereum-boilerplate/ethereum-react-native-boilerplate/blob/main/shim.js

if (typeof __dirname === 'undefined') global.__dirname = '/'
if (typeof __filename === 'undefined') global.__filename = ''
if (typeof process === 'undefined') {
  global.process = require('process')
} else {
  const bProcess = require('process')
  for (var p in bProcess) {
    if (!(p in process)) {
      process[p] = bProcess[p]
    }
  }
}

process.browser = false
if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer

// global.location = global.location || { port: 80 }
const isDev = typeof __DEV__ === 'boolean' && __DEV__
process.env['NODE_ENV'] = isDev ? 'development' : 'production'
if (typeof localStorage !== 'undefined') {

This file has been truncated. show original

gen · March 21, 2022, 1:53pm

@phyx1u5 none that I know of. I was able to make an android build with it.

phyx1u5 · March 21, 2022, 4:05pm

thank you Gen.
is it possible for you to put together a bare bones react native + moralis boiler plate?