Compiled with problems, 'crypto' module not found error in react js - reactjs

Question

Compiled with problems:
ERROR in ../node_modules/eth-lib/lib/bytes.js 9:193-227
Module not found: Error: Can't resolve 'crypto' in '..2\node_modules\eth-lib\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }
Every time I start react-app local server, the system flags several error relating to the crypto module even though I have installed all the dependencies. I have even tried resolve: {
fallback: { crypto: false },
}, in my webpack config.js file But nothing works. Please guide me.
**App.js:**
import React, {useEffect, useState} from 'react';
import path from 'path';
import logo from './logo.svg';
import './App.css';
import Web3 from 'web3';
import Mycontractabi from "./contracts/Mycontract1.json";
function App() {
useEffect(()=>{
loadWeb3();
loadBlockchaindata();
},[])
const loadWeb3=async()=>{
if (window.ethereum){
window.web3=new Web3(window.ethereum);
await window.ethereum.enable();
}
else if (window.web3){
window.web3=new Web3(window.web3.currentProvider);
}
else{
window.alert("Please install Metamask!");
}
}
const loadBlockchaindata=async()=>{
const web3=window.web3;
const accounts=web3.eth.getAccounts();
const account=accounts[0];
const networkId= await web3.eth.net.getId();
const networkData=Mycontractabi.networks[networkId];
if(networkData){
const project=new web3.eth.Contract(Mycontractabi.abi,networkData);
console.log(project);
}
else{
window.alert("Smart contract is not deployed in current network!");
}
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
**package.json**
{
"name": "phase2",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"assert": "^2.0.0",
"crypto": "^1.0.1",
"crypto-browserify": "^3.12.0",
"crypto-js": "^3.1.9-1",
"crypto-random-string": "^5.0.0",
"http": "0.0.1-security",
"https": "^1.0.0",
"https-browserify": "^1.0.0",
"os": "^0.1.2",
"path": "^0.12.7",
"path-browserify": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"stream": "0.0.2",
"stream-http": "^3.2.0",
"url": "^0.11.0",
"web-vitals": "^2.1.4"
},
"browser": {
"crypto": false,
"stream": false
},
"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"
]
},
"compilerOptions": {
"baseUrl": "./",
"paths": {
"crypto": [
"node_modules/crypto-js"
]
}
}
}

Answer 1

this might be too simple of an answer but did you npm install before opening it up locally?