I was working on a truffle project with react in the front-end. As I was importing web3 to my App.js, this happens,
ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22
Module not found: Error: Can't resolve 'os' in './node_modules/xhr2-cookies/dist'
along with seven more errors like
Can't resolve 'crypto' Can't resolve 'http'
etc. I already tried the solutions provided here> How to fix "module not found error" in xhr2-cookies
My package.json file is as follows:
{
"name": "bootcamp-new",
"version": "0.1.0",
"private": true,
"dependencies": {
"@babel/cli": "^7.16.8",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.16.8",
"@babel/register": "^7.0.0",
"@openzeppelin/contracts": "^4.4.2",
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"@truffle/hdwallet-provider": "^2.0.0",
"apexcharts": "^3.33.0",
"assert": "^2.0.0",
"babel-preset": "^1.1.7",
"bootstrap": "^5.1.3",
"buffer": "^6.0.3",
"chai": "^4.3.4",
"chai-as-promised": "^7.1.1",
"chai-bignumber": "^3.0.0",
"crypto-browserify": "^3.12.0",
"dotenv": "^12.0.3",
"eth-lib": "^0.1.29",
"https-browserify": "^1.0.0",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"node-gyp": "^8.4.1",
"openzeppelin-solidity": "^4.4.2",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.1.1",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-scripts": "5.0.0",
"redux": "^4.1.2",
"redux-logger": "^3.0.6",
"reselect": "^4.1.5",
"solidity-coverage": "^0.7.17",
"stream": "0.0.2",
"stream-browserify": "^3.0.0",
"stream-http": "^3.2.0",
"truffle": "^5.4.29",
"truffle-flattener": "^1.5.0",
"truffle-hdwallet-provider-privkey": "^0.3.0",
"url": "^0.11.0",
"web-vitals": "^2.1.3",
"web3": "^1.7.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"webpack-cli": "^4.9.1"
}
}
and my webpack.config.js file is:
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
],
resolve:{
fallback: {
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
os: require.resolve("os-browserify/browser"),
url: require.resolve("url"),
assert: require.resolve("assert"),
},
}
}
But still getting the errors. Some guys told me to upgrade babel and I did. But, no luck.
