Moralis React Native, Crypto Dep Error

Technical Issue Reporting
#1

Hello, I’m trying to install moralis to my react native app and keep getting this error, Is there something I’m missing? I tried “npm i crypto” but that doesn’t work

Simulator Screen Shot - iPhone 11 - 2021-07-08 at 00.36.13
Simulator Screen Shot - iPhone 11 - 2021-07-08 at 00.36.13828×1792 99.3 KB

#2

Hey @clb

Install crypto-js package using:

npm install crypto-js

And then change the code on line 28 to this one.

var CryptoJS = require('crypto-js');

Let me know how it works :grinning:

1 Like
#3

Now its saying… Unable to resolve module https, I dont think moralis is working with react native. I have zero vulnerabilities but after i install Moralis I get 10. Is there a work around without using API calls?

#5

Heres what i get after ‘npm i https’:

While trying to resolve module https from file /Users/u/app/node_modules/web3-providers-http/lib/index.js, the package /Users/u/app/node_modules/https/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/u/app/node_modules/https/index.js. Indeed, none of these files exist: …

#6

Hey @clb

Please share your package.json file

#7

Screen Shot 2021-07-09 at 2.42.31 PM
Screen Shot 2021-07-09 at 2.42.31 PM928×1340 159 KB

#8

Hey @clb

Plese share your metro.config.js

#9

Screen Shot 2021-07-10 at 2.58.16 AM
Screen Shot 2021-07-10 at 2.58.16 AM772×680 39.3 KB

#10

Change it to:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx'],
  },
};
#11

No errors but app wont start, doesnt go past the splash screen

#12

Restarted metro now im getting this:
Error: Unable to resolve module http from /Users/u/app/node_modules/web3-providers-http/lib/index.js: http could not be found within the project or in these directories:
node_modules
…/node_modules

#13

Install react-native-crypto instead of crypto-js

And then change

var CryptoJS = require('react-native-crypto')

My bad, we needed to do this from the beginning.

#14

npm uninstall crypto-js

npm i react-native-crypto --save

#15

Still getting this error, I restarted everything
Error: Unable to resolve module http from /Users/u/app/node_modules/web3-providers-http/lib/index.js: http could not be found within the project or in these directories:
node_modules
…/node_modules

#16

After npm i http:

Error: While trying to resolve module http from file /Users/u/app/node_modules/web3-providers-http/lib/index.js, the package /Users/u/app/node_modules/http/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/u/app/node_modules/http/index. Indeed, none of these files exist:

#17

Can you upload it to github and send me a link in DM?

#18

Is this how to connect to moralis on react native:

const Moralis = require(‘moralis/react-native.js’)

Moralis.initialize(‘XXXXXXXXXXXX’);

Moralis.serverURL = ‘https://XXXXXXXXX.moralis.io:XXXX/server’;

#19

You should install React Moralis:

npm install react-moralis --save

Take a look at React Moralis Docs
index.js file:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { MoralisProvider } from 'react-moralis';

const theme = extendTheme({
  config: {
    initialColorMode: 'dark',
  },
});

const appId = 'YOUR_APP_ID';
const serverUrl = 'YOUR_SERVER_URL';

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId={appId} serverUrl={serverUrl}>
        <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

For developing on React Native please use Moralis React SDK

The difference for developing on React Native is for metamask authentication and all that , you would need to do extra steps

How to use moralis SDK correctly in React Native？
#20

I don’t need metamask i just want to access the data only

#21

this is the index.js, exactly do I fix it for RN:

/**

  • @format

*/

import {AppRegistry} from ‘react-native’;

import App from ‘./App’;

import {name as appName} from ‘./app.json’;

AppRegistry.registerComponent(appName, () => App);