Module not found: Error: can't resolve 'web3'

Question

I am trying to import web3 module to my code but it seems that the code cannot recognize. I have tried using npm install web3, but it made the whole thing down. May I ask is there any solutions for this? I have also tried deleting the node_modules and reinstall using npm install but it still doesn't work.

Below is my code:

//usePools.js
import Web3 from  'web3';
import { useState, useEffect } from 'react';
import { useConfig } from '@usedapp/core';

import { ROUTER_ADDRESS } from '../config';
import { getFactoryInfo, getRouterInfo } from '../utils';

export const loadPools = async (providerUrl) => {
    const provider = new Web3.providers.HttpProvider(providerUrl);
    const web3 = new Web3(provider);

    const routerInfo =  await getRouterInfo(ROUTER_ADDRESS, web3);
    const factoryInfo = await getFactoryInfo(routerInfo.factory, web3);

    return factoryInfo.pairsInfo;

}


export const usePools = () => {
    const { readOnlyChainId, readOnlyUrls } = useConfig();
    const [loading, setLoading] = useState(true);
    const [pools, setPools] = useState({});


    useEffect(() =>{
        loadPools(readOnlyUrls[readOnlyChainId])
        .then((pools) => {
            setPools(pools)
            setLoading(false)
        })
    }, [readOnlyUrls, readOnlyChainId]);
    

    return [loading, pools];
}

//Package.json
{
  "name": "@my-app/react-app",
  "version": "1.0.0",
  "homepage": "./",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@my-app/contracts": "^1.0.0",
    "@apollo/client": "^3.5.10",
    "@ethersproject/contracts": "^5.6.0",
    "@ethersproject/providers": "^5.6.0",
    "@testing-library/dom": "^8.11.3",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^17.0.40",
    "graphql": "^16.3.0",
    "ipfs-deploy": "^11.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "@usedapp/core": "^1.1.5",
    "@uniswap/sdk": "^3.0.2",
    "@uniswap/v2-core": "^1.0.1",
    "@uniswap/v2-periphery": "^1.1.0-beta.0",
    "ethers": "^5.7.0",
    "web3": "^4.5.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "ipfs": "yarn build && ipfs-deploy build/",
    "start": "react-scripts start",
    "test": "react-scripts test"
  }
}

Original Error Error after installing web3

Answer 1

Firstly, try updating your node version. I believe your problem is related with previous node version conflict with OpenSSL.

npm install -g n

n latest

If the issue continues, change

react-scripts start

with

react-scripts --openssl-legacy-provider start

in your package.json file.

Hope this answer helps.