反应：找不到模块：无法解析“ xmlhttprequest”

Question

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?

Answer 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

Answer 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 ethers@4.0.20