1

I am completely new to web3 and react . I following a course to build a small project .I have been trying add a web3 instance in my main react file . I getting this error everytime .

ERROR in ./node_modules/cipher-base/index.js 2:16-43 Module not found: Error: Can't resolve 'stream' in 'C:\Users\SHORNA\lottery\node_modules\cipher-base'

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: { "stream": require.resolve("stream-browserify") }' - install 'stream-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "stream": false } enter code here

I cant figure our where I am going wrong .

whenever I add

import web3 from './web3'; this line in my app.js file I get above error

Here is my App.js file

import logo from './logo.svg';
import './App.css';
import web3 from './web3';

function App() {



  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;

here is web3.js file

import Web3 from 'web3';

const web3=new Web3(window.web3.currentProvider);

export default web3;

Here is package.json file

{
  "name": "lottery",
  "version": "0.1.0",
  "private": true,
  "dependencies": {

    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
    "web3": "^1.0.0-beta.26"
  

  },
  "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"
    ]
  }
}

1 Answer 1

1

Indeed, this is a known problem of apps using Webpack 5, web3 package has certain dependencies, which are not present within the browser environment by webpack 5 and you need to polyfill.

You can follow this article from web3Auth, where they explain step by step how to solve this problem:

https://web3auth.io/docs/troubleshooting/webpack-issues#react

Hope it helps!

1
  • Still getting the same error !
    – Shorna
    Commented Apr 5, 2023 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.