Web3.js: React Native issue ‘’web3.js cryptofromnode_modules/web3-eth-accounts/src/index.js`: Module does not exist in the module map‘’ happened again with RN 0.57.X

[elanpang]

OS:MacOS 10.14
Programming Language version: React Native 0.57.1-iOS

I met this issue on React Native 0.56 before, and then resolved it with this Guide:How to set up web3.js with CRNA .
But recently we updated to React Native 0.57.1, this issue happened again, I tried to create a whole new RN project with the Guide, but the issue still happened.

I think we need a new solution to resolve it, is there anyone having the same issue?

refs old issue ticket:
https://github.com/ethereum/web3.js/issues/1095

ps:don't care RN 0.57.2, it has other problems.

[theone3nu]

Sane issue waiting for the solution.

[khiemkino]

Same issue here

[khiemkino]

Anyone get news from this issue

[elanpang]

Anyone get news from this issue

not yet, I tried to modify source code, but still not work

[crazybuster]

Hey guys, in case you are still having issues with this. I believe as of 0.57.0 RN has moved to using metro.config.* instead of rn-cli.config.js, also the config format has changed. So you need to create a metro.config.js with:

const extraNodeModules = require('node-libs-browser')

module.exports = {
resolver: {
extraNodeModules
}
};

[elanpang]

@crazybuster It also doesn't work, thank you a lot

[crazybuster]

@elanpang Are you using the metro bundler? And did you restart the bundler and clear the metro cache?

Mine is working on RN 0.57.4 on ios, react 16.6.0-alpha.8af6728, web3 1.0.0-beta.34.

[elanpang]

@crazybuster I tried RN 0.57.4 but web3 1.0.0-beta.36, I will try web3 1.0.0-beta.34 and report later.

BTW, I also tried other extraNodeModules lib, but there are some other issues, I guess maybe the issue is relative with babel 7.

[elanpang]

Hi @crazybuster ,
web3 1.0.0-beta.34 works with RN 0.57.4, but there are many warn messages, details see the screenshot.

Before web3 1.0.0-beta.35 worked on RN 0.56, but now both web3 1.0.0-beta.35 and web3 1.0.0-beta.36 doesn't work on RN 0.57.4, it reports undefined exception when evaluate 'process.versions.node'.

[elanpang]

@crazybuster

I added blow code in global.js

global.process.versions = { http_parser: '', node: '', v8: '', uv: '', zlib: '', ares: '', icu: '', modules: '', openssl: '' };

then web3 1.0.0-beta.36 works, but there are still lots of warn messages even promise exception, I don't think it real works well.

[crazybuster]

@elanpang Those look like app specific issues to me. I was just sharing my fix on metro bundler not finding the node-libs-browser modules.

[elanpang]

@crazybuster Thank you very much, those issues caused when call web3 api, I will try to fight out them.

[fcubel]

Hi all, did you manage to fix the problem? Using web3 in RN with Expo I get the error: Metro Bundler has encountered an internal error
ABI29_0_ ...
ABI30_0_ ...
and console message:
Failed building JavaScript bundle

[mahyar33]

I have the same problem and it doesn't work for me

[6pm]

@elanpang did you fixed it? I'm trying to setup react-native 0.57.4 and web3 1.0.0-beta.37. App started after I have done all steps from https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
I have started ganache on 'http://127.0.0.1:7545''.
web3 is not works, code:

const provider = new Web3.providers.HttpProvider('http://127.0.0.1:7545')
const web3Instance = new Web3(provider)
// printing on the console the latest ethereum block
web3Instance.eth.getBlock('latest').then(console.log).catch(console.log);

I don't see anything in console.
Any ideas how to fix it?

UPD. This issue helped me - github.com/souldreamer/xhr2-cookies/issues/7

[anakornk]

Got it working on react-native 0.57.8 and web3 1.0.0-beta.37. Although there are still lots of warnings like @elanpang. Here is the step by step guide that i went through:
https://github.com/anakornk/web3WithReactNative

@6pm I was having problems with using HTTP Provider also. Changing XMLHTTPRequest also worked for me but it requires editing a node_modules file. I'm currently using websocket provider instead. Got it to work by doing this:
https://github.com/facebook/react-native/issues/16434#issuecomment-392147974

[Liamandrew]

As @crazybuster mentioned, the solution for me was to move my rn-cli.config.js into metro.config.js. This is a change with RN 57 mentioned here. And the details of how the metro.config.js file should look is discussed here.

My metro.config.js ended up looking like:

const extraNodeModules = require('node-libs-browser');

module.exports = {
    resolver: {
        extraNodeModules,
    },
};

I'm currently using RN version 57.8 & web3 version 1.0.0-beta.37.

[elanpang]

@6pm no solution yet ：（

[yongloon]

Got it working on react-native 0.57.8 and web3 1.0.0-beta.37. Although there are still lots of warnings like @elanpang. Here is the step by step guide that i went through:
https://github.com/anakornk/web3WithReactNative

@6pm I was having problems with using HTTP Provider also. Changing XMLHTTPRequest also worked for me but it requires editing a node_modules file. I'm currently using websocket provider instead. Got it to work by doing this:
facebook/react-native#16434 (comment)

android not working, only work on ios

[anakornk]

@nyl9488 fixed. Please pull the latest master branch.
https://github.com/anakornk/web3WithReactNative

[nivida]

This should be fixed with the new bundles in the next release. Please drop a comment here if not.
pre-release: https://github.com/ethereum/web3.js/tree/v1.0.0-beta.38-rc2

[maschad]

I was able to fix it on RN 0.60.0 by updating my metro.config.js like

const extraNodeModules = require('node-libs-react-native');
extraNodeModules.vm = require.resolve('vm-browserify')

module.exports = {
    resolver: {
        extraNodeModules,
    },
};

I'm using the following dependencies :

"dependencies": {
    "@makerdao/dai": "^0.16.2",
    "Base64": "^1.0.2",
    "drizzle": "^1.4.0",
    "node-libs-react-native": "^1.0.3",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-randombytes": "^3.5.3",
    "vm-browserify": "^1.1.0",
    "web3": "^1.0.0-beta.55"
  }

[ZeeshanAhmadKhalil]

@maschad its working for me with following dependencies as well;

dependencies": {
    "node-libs-browser": "^2.2.1",
    "node-libs-react-native": "^1.0.3",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "vm-browserify": "^1.1.2",
    "web3": "^1.0.0-beta.55"
  },

Thank you for your help