Moralis not working in react native 0.64.x and after

fatih01 · February 4, 2022, 5:20pm

Hi,
It is working in RN 0.63.3. react-native-boilerplate

I’m trying implementation Moralis in RN 0.64.x and 0.65.x
moralis: "0.0.99",
It doesn’t work when i use import Moralis from 'moralis/react-native';

It works when i make the following change in node_modules/moralis/lib/react-native/EventEmitter.js

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
EventEmitter.prototype.on = EventEmitter.prototype.addListener;
module.exports = EventEmitter;

to

if (process.env.PARSE_BUILD === 'react-native') {
  const EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
  EventEmitter.prototype.on = EventEmitter.prototype.addListener;
  module.exports = EventEmitter;
} else {
  module.exports = require('events').EventEmitter;
}

Can you check in newer versions of React Native?
Thanks

malik · February 5, 2022, 7:17am

Thank you for reporting. We will try updating it from our side and see if we can solve it.

malik · February 5, 2022, 6:20pm

If you have any good fixes, you can always create a pull request and contribute to the repository. Cheers

loekTheDreamer · February 10, 2022, 12:09pm

I cant get moralis to work with react native either.

Error: Unable to resolve module events from /Users/doris/myFolder/royal protocol/projects/temp/moralisNativeFixing/MoralisFix/node_modules/moralis/lib/react-native/Web3Connector/AbstractWeb3Connector.js: events could not be found within the project or in these directories:
node_modules/moralis/n

unfortunately @fatih01 solution doesnt work for me.

   "dependencies": {
    "@ethersproject/shims": "^5.5.0",
    "ethers": "^5.5.4",
    "moralis": "^1.3.1",
    "react": "17.0.2",
    "react-moralis": "^1.3.1",
    "react-native": "0.66.3",
    "react-native-get-random-values": "^1.7.2"
  },

Can anyone suggest a workaround while this issue is taken care of?

phyx1u5 · February 16, 2022, 9:01am

fatih01:

if (process.env.PARSE_BUILD === 'react-native') {
  const EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');
  EventEmitter.prototype.on = EventEmitter.prototype.addListener;
  module.exports = EventEmitter;
} else {
  module.exports = require('events').EventEmitter;
}

FYI a hack to this is to change the following lines in file

node_modules/moralis/lib/react-native/EventEmitter.js

change the first line from:

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');

to:

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/_EventEmitter');

currently working in react-native version 0.67.2

fatih01 · February 16, 2022, 9:30am

Yes i tried. It works too.

loekTheDreamer · February 22, 2022, 1:50pm

Your solution does not work for me, neither does @fatih01 solution.
Let me show you the steps i have followed so that we can figure what step I am missing:

npx react-native init MyApp --template react-native-template-typescript
yarn add ethers @ethersproject/shims react-native-get-random-values moralis react-moralis patch-package postinstall-postinstall
change line in node_modules/moralis/lib/react-native/EventEmitter.js from

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/EventEmitter');

to

var EventEmitter = require('../../../react-native/Libraries/vendor/emitter/_EventEmitter');

yarn patch-package moralis
cd ios then pod install then cd ..
yarn ios
Then i get Error:
Unable to resolve module events from /Users/doris/Documents/myFolder/ royalprotocol/testing/MoralisNativeTest2/node_modules/moralis/lib/ react-native/MoralisWeb3.js: events could not be found within the project or in these directories:
node_modules/moralis/node_modules
node_modules

these are my package versions:

"dependencies": {
    "@ethersproject/shims": "^5.5.0",
    "ethers": "^5.5.4",
    "moralis": "^1.3.2",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "react": "17.0.2",
    "react-moralis": "^1.3.1",
    "react-native": "0.67.2",
    "react-native-get-random-values": "^1.7.2"
  },

Im using node v14.18.3

What step have I missed to make this work on react native?

phyx1u5 · February 22, 2022, 1:52pm

sorry forgot to mention I’m using moralis 0.0.99 and react-moralis 0.2.7 anything above that doesn’t work for react native right now unfortunately.
hopefully the devs give more love to react native builders soon.
check out their react native boilerplate, see the package versions they use

loekTheDreamer · February 22, 2022, 4:00pm

@phyx1u5 i changed the packages like you mentioned but i still get the same error as above.

  "dependencies": {
    "@ethersproject/shims": "^5.5.0",
    "ethers": "^5.5.4",
    "moralis": "0.0.99",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "react": "17.0.2",
    "react-moralis": "0.2.7",
    "react-native": "0.67.2",
    "react-native-get-random-values": "^1.7.2"
  }

and node v14.18.3

Could you maybe upload a repo?
What version of node are you using?

phyx1u5 · February 23, 2022, 1:02am

I highly recommend you try the following:
clone the react native boiler plate and try get that working. if you get stuck watch the YouTube vid.
https://youtu.be/dZYSr9UPdfQ

once you get it working, you can then try upgrade react native following the instructions at their site.
https://reactnative.dev/docs/upgrading
note if
npx react-native upgrade
fails then you will have to follow the manual instructions.

after upgrade then you can edit the EventEmitter file as I mentioned.
you will have to edit the file every time you run yarn add for every new package as it will rewrite the file.

don’t for forget to

cd ios && pod install

if you are building for ios

a few other things, to note:
npx react-native run-android/run-ios

didn’t work for me, I always had to build via android studio or xcode + running npx react-native start in a separate terminal

talhabinkhalil · March 1, 2022, 2:27pm

Hi @malik , i am trying to use Moralis in react native . Following are the details of my dependencies i.e versions
“@ethersproject/shims”: “^5.5.0”,
“ethers”: “^5.5.4”,
“moralis”: “0.0.99”,
“patch-package”: “^6.4.7”,
“react”: “17.0.2”,
“react-moralis”: “0.2.7”,
“react-native”: “0.67.3”,
“react-native-get-random-values”: “^1.7.2”

Whenever i import MoralisProvider and try to use it , app returns following error
Error: Unable to resolve module events from /home/mtalha/NewDapp/node_modules/moralis/lib/browser/MoralisWeb3.js: events could not be found within the project or in these directories:
node_modules/moralis/node_modules
node_modules

I have tried all of the available solutions but of no avail. Pleae help me out in that .

phyx1u5 · March 3, 2022, 2:33am

have you tried following my steps?

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)