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

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, and although we searched hard using Goolgle search, we have not solved it yet.

I'm waiting for a good answer. Please help me with the solution.

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 link solution will not solve my problem.

score 0 · Answer 1 · answered Feb 15 '19 at 14:41

0

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

answered Feb 15 '19 at 14:41

nikos fotiadis

1,010
2
8
15

I made and installed the file according to the link you already recommended, but the error was the same. – samjamy Feb 19 '19 at 02:00
Try this one: https://stackoverflow.com/questions/52697108/unable-to-resolve-module-crypto-in-reactnative. let me know if your error message changes. – nikos fotiadis Feb 19 '19 at 12:39
1

I can't do Link because I'm using Expo. – samjamy Feb 22 '19 at 03:57

score 0 · Answer 2 · answered Nov 14 '19 at 22:42

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

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

2 Answers2