'React: Module not found: Can't resolve 'xmlhttprequest'

I'm getting an error when trying to build my React project:

./node_modules/ethers/utils/web.js Module not found: Can't resolve 'xmlhttprequest' in '/mnt/c/Users/.../node_modules/ethers/utils'

In package.json:

"dependencies": {
    "@material-ui/core": "^3.8.1",
    "@material-ui/icons": "^3.0.1",
    "axios": "^0.18.0",
    "immutability-helper": "^2.9.0",
    "moment": "^2.22.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.2"
  },

What should I do?

reactjsnpmwebpackxmlhttprequesttruffle


Solution 1:[1]

I got my project working again by not importing 'truffle-contract'. There's a React Truffle example here: https://github.com/truffle-box/react-box which doesn't import truffle-contract. I made my project more like that one. I then had to change my code to use the contract interface provided by web3: https://web3js.readthedocs.io/en/1.0/web3-eth-contract.html

Solution 2:[2]

To overcome this problem you need to install a different version of ethers as explained in this issue:

https://github.com/trufflesuite/truffle/issues/1614#issuecomment-452158490

Exact comment with solution:

ethers (v4.0.0-beta.1) gets installed as a dependency of web3-eth-abi (v1.0.0-beta.37) Which leads to the xmlhttprequest complaint and basically makes truffle-contract unusable. I was able to get around it for now by manually upping ethers to v4.0.20.

$ npm install [email protected]

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Justin Harris
Solution 2 Carlos_0202

Related Questions