Error Unable to resolve module `http` from web3-providers.umd.js - expo

Question

I installed web3 to link Solidity to React-native. As in the code below, I deployed it from Remix and entered the address and ABI.
import Web3 from "web3";
const web3 = new Web3(
new Web3.providers.HttpProvider("https://127.0.0.1:8545")
);
const address = "0x6cc33e32853a7fb0ac9ac2fb0d54cb56e4fb0f30";
const abi = [
{
constant: false,
inputs: [
{
name: "_MASTER",
type: "address"
},
{
name: "_sitter",
type: "address"
},
{
name: "_sitterprice",
type: "uint256"
}
],
name: "CompleteSharePet",
outputs: [],
payable: true,
stateMutability: "payable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_OWNER",
type: "address"
},
{
name: "_ownersharetext",
type: "string"
},
{
name: "_ownerprice",
type: "uint256"
}
],
name: "OwnerShareText",
outputs: [
{
name: "",
type: "string"
}
],
payable: false,
stateMutability: "nonpayable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_ownerseller",
type: "address"
},
{
name: "_petsitter",
type: "address"
},
{
name: "_MASTER",
type: "address"
},
{
name: "_ownerprice",
type: "uint256"
}
],
name: "PetChange",
outputs: [],
payable: true,
stateMutability: "payable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_PETSITTER",
type: "address"
},
{
name: "_master",
type: "address"
},
{
name: "_ownerprice",
type: "uint256"
}
],
name: "PetChangeTransaction",
outputs: [],
payable: true,
stateMutability: "payable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_petsittertext",
type: "string"
},
{
name: "_sitterprice",
type: "uint256"
}
],
name: "PetSitterShareText",
outputs: [
{
name: "",
type: "string"
}
],
payable: false,
stateMutability: "nonpayable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_sitter",
type: "address"
}
],
name: "testsitter",
outputs: [],
payable: true,
stateMutability: "payable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "_master",
type: "address"
},
{
name: "_OWNER",
type: "address"
},
{
name: "_sitterprice",
type: "uint256"
}
],
name: "TransactionSharePet",
outputs: [],
payable: true,
stateMutability: "payable",
type: "function"
},
{
constant: false,
inputs: [
{
name: "hash",
type: "string"
},
{
name: "ipfs",
type: "string"
}
],
name: "uploadImage",
outputs: [],
payable: false,
stateMutability: "nonpayable",
type: "function"
},
{
constant: true,
inputs: [],
name: "AllOwnerCount",
outputs: [
{
name: "",
type: "uint256"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [],
name: "AllPetSitter",
outputs: [
{
name: "",
type: "uint256"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [],
name: "getOwnerAddresses",
outputs: [
{
name: "",
type: "address[]"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "_owner",
type: "address"
}
],
name: "getOwnerInfo",
outputs: [
{
name: "",
type: "string"
},
{
name: "",
type: "string"
},
{
name: "",
type: "string"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [],
name: "getPetSitterAddresses",
outputs: [
{
name: "",
type: "address[]"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "_petsitter",
type: "address"
}
],
name: "getPetSitterInfo",
outputs: [
{
name: "",
type: "string"
},
{
name: "",
type: "string"
},
{
name: "",
type: "string"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "",
type: "uint256"
}
],
name: "OwnerAddresses",
outputs: [
{
name: "",
type: "address"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "",
type: "uint256"
}
],
name: "PetSitterAddresses",
outputs: [
{
name: "",
type: "address"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "_OWNER",
type: "address"
}
],
name: "test",
outputs: [
{
name: "",
type: "uint256"
}
],
payable: false,
stateMutability: "view",
type: "function"
},
{
constant: true,
inputs: [
{
name: "_MASTER",
type: "address"
}
],
name: "test2",
outputs: [
{
name: "",
type: "uint256"
}
],
payable: false,
stateMutability: "view",
type: "function"
}
];
export class WalletSetting extends Component {
test() {
web3.eth.getAccounts().then(console.log);
}
render() {
return this.test;
}
}
export default (myContract = new web3.eth.Contract(abi, address));
The setting was error-free, but the error occurred when import was made to use mycontact
import WalletSetting from "../web3";
.
.
.
</TouchableOpacity>
<WalletSetting />
</LinearGradient>
Error Image
I deleted all the node_modules and all the cache, just like the way in the picture. However, the same error occurred.
I downloaded the web3 version as "^1.0.0-beta.34" to resolve the existing error, but another error occurred.
Error is
Unable to resolve module crypto from /Users/lucky/pettest/node_modules/web3-eth-accounts/src/index.js: Module crypto does not exist in the Haste module map
So I went to Google for reference https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
And install "node-libs-browser": "^2.2.0", "babelpresetes2015":"^6.24.1",
and create a file called rn-cli.config.js, global.js and import the globaljs file into your web3.js file, but the error was the same.
How can I fix this?
https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766
This linked solution will not solve my problem.

Answer 1

web3 was made to work in a browser environment. The native android environment is different than that of a browser, for example, it doesn't have the crypto class that web3 uses. Using web3 with react native will require some extra configuration. You can follow this guide: https://gist.github.com/dougbacelar/29e60920d8fa1982535247563eb63766.
Also you can find a boilerplate here: https://github.com/dougbacelar/react-native-web3

Answer 2

I have a solution to part of your problem, regarding crypto. Install react-native-crypto and save it as a dependency, then babel-plugin-module-resolver as a dev-dependency, and put a .babelrc file in your project root that contains something like this:
{
"plugins": [
["module-resolver", {
"root": ["."],
"alias": {
"crypto": "react-native-crypto"
}
}]
]
}
This replaces any require('crypto') in your installed packages with require('react-native-crypto'), and it worked for me. In my case however, the same package I had that was missing crypto is also missing http so I came to this thread to hopefully find a polyfill for that too. I am on RN v0.60.3, npm v6.9.0, and node v10.16.0 for anyone interested. Also the package I needed this 'shim' for is the request package, which seems to be a sub-sub-sub-sub-dependency of jest. (npm list request).
I hope this helps somebody!
I found this solution here: https://stackoverflow.com/a/46605706/12375465
and here: https://medium.com/studioarmix/the-joy-of-joi-hacking-node-deps-1337fd5e586f