error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http'

Question

error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http'

394 Views Asked by Megabyte At 11 April 2025 at 10:35

I am working on Next.js

Error which I am receiving =>

    error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0
Module not found: Can't resolve 'http'

Import trace for requested module:
./node_modules/web3-eth-contract/node_modules/web3-core-requestmanager/lib/index.js
./node_modules/web3-eth-contract/node_modules/web3-core/lib/index.js
./node_modules/web3-eth-contract/lib/index.js
./node_modules/@toruslabs/fetch-node-details/dist/fetchNodeDetails.esm.js
./node_modules/@toruslabs/torus-embed/dist/torus.esm.js
./node_modules/@web3auth/torus-evm-adapter/dist/torusEvmAdapter.esm.js
./node_modules/@web3auth/web3auth/dist/web3auth.esm.js
./node_modules/moralis/lib/browser/Web3Connector/Web3AuthConnector.js
./node_modules/moralis/lib/browser/MoralisWeb3.js
./node_modules/moralis/lib/browser/Parse.js
./node_modules/moralis/index.js
./node_modules/react-moralis/lib/index.esm.js
./pages/_app.js

My package.json =>

        {
  "name": "client",
  "private": true,
  "browser": {
    "fs": false,
    "path": false,
    "crypto": false,
    "os": false
  },
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@babel/runtime": "^7.17.8",
    "@nomiclabs/hardhat-ethers": "^2.0.5",
    "@nomiclabs/hardhat-waffle": "^2.0.3",
    "@openzeppelin/contracts": "^4.5.0",
    "@walletconnect/web3-provider": "^1.7.5",
    "@web3auth/web3auth": "^0.6.3",
    "assert": "^2.0.0",
    "axios": "^0.26.1",
    "chai": "^4.3.6",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "dotenv": "^16.0.0",
    "elasticsearch": "^16.7.3",
    "elasticsearch-browser": "^16.7.1",
    "ethereum-waffle": "^3.4.0",
    "ethers": "^5.6.1",
    "fs": "^0.0.1-security",
    "hardhat": "^2.9.1",
    "http": "^0.0.1-security",
    "ipfs-http-client": "^56.0.1",
    "magic-sdk": "^8.1.0",
    "moralis": "^1.5.5",
    "next": "12.1.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-moralis": "^1.3.4",
    "reactjs-popup": "^2.0.5",
    "stream": "^0.0.2",
    "web3modal": "^1.9.5"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.4",
    "eslint": "8.11.0",
    "eslint-config-next": "12.1.0",
    "postcss": "^8.4.12",
    "tailwind": "^4.0.0",
    "tailwindcss": "^3.0.23"
  }
}

next.config.js =>

   module.exports = (phase, { defaultConfig }) => {
  return {
    ...defaultConfig,

    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          "fs": false,
          "path": false,
          "os": false,
          "crypto": false,
        }
      }
      return config
    },
  }
}

_app.js =>

import '../styles/globals.css'
import Link from 'next/link'
import Head from 'next/head'
import Footer from './components/Footer/Footer'
import { MoralisProvider } from "react-moralis"
import { ServerUrl, AppId } from "../config"

function MyApp({ Component, pageProps }) {
  return (
    <MoralisProvider appId={AppId} serverUrl={ServerUrl}>
      <div className='flex flex-col h-screen'>
        <Head>
          <title> Certified-Cliché</title>
          <meta name="description" content="Generated by create next app" />
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <nav className="border-b p-6 place-content-center">
          <p className="text-4xl font-bold mt-4  ">
            Certified-Cliché
          </p>
          <div className="flex mt-4">
            <Link href="/home">
              <a className="mr-4 text-pink-500">
                Home
              </a>
            </Link>
            <Link href="/create-certificate">
              <a className="mr-6 text-pink-500">
                Create Certificate
              </a>
            </Link>
            <Link href="/transferred-certificate">
              <a className="mr-6 text-pink-500">
                Transferred Certificate
              </a>
            </Link>
            <Link href="/my-certificates">
              <a className="mr-6 text-pink-500">
                My Certificates
              </a>
            </Link>
          </div>
        </nav>

        <Component {...pageProps} />
        <Footer />
      </div>
    </MoralisProvider>
  )
}

export default MyApp

What I tried till now =>

Deleting node_modules and npm i.
npm i http
Deleting the .next build folder and starting again.
Setting the browser- crypto:false in package.json

Most the solutions I found were for the Angular.js.

If you require any more information, then please let me know. Thank You in Advance.

Original Q&A

There are 1 best solutions below

**Ali AlHussain** · Answer 1

This error you have based on Next.js website:

A module not found error can occur for many different reasons:

The module you're trying to import is not installed in your dependencies
The module you're trying to import is in a different directory
The module you're trying to import has a different casing
The module you're trying to import uses Node.js specific modules, for example dns, outside of getStaticProps / getStaticPaths / getServerSideProps

Please check out the link for possible fixes.

error - ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 Module not found: Can't resolve 'http'

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in NEXT.JS

Related Questions in SOLIDITY

Related Questions in POLYGON

Related Questions in MORALIS

Trending Questions

Popular # Hahtags

Popular Questions