Oops! An issue occurred at ./node_modules/web3-eth-contract/node_modules/web3-providers-http/lib/index.js:26:0 where a module cannot be located. The module in question is 'http'

I have been troubleshooting an issue with Next.js

The error I am encountering =>

    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

Contents of my package.json file =>

        (JSON content here)

next.config.js configuration =>

   (Webpack config code here)

_app.js implementation =>

(JavaScript code here)

Steps I've taken so far to address the issue =>

  1. Deleted node_modules and ran npm i.
  2. Ran npm i http
  3. Removed the .next build folder and restarted.
  4. Set crypto:false in the browser section of package.json

Most solutions I came across were for Angular.js, not Next.js.

If you need more details or have any suggestions, please feel free to reach out. Thank you for your assistance.

javascriptnext.jssoliditypolygonmoralis

Answer №1

Your current issue is related to a module not being found, as explained on the Next.js website:

There are various reasons why a module not found error can occur:

  • The module you're attempting to import is not included in your dependencies
  • The module you're trying to import is located in a different directory
  • The module you're trying to import has a different letter casing
  • The module you're trying to import includes Node.js specific modules like dns, which are used outside of getStaticProps / getStaticPaths / getServerSideProps

Please refer to the provided link for potential solutions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Recently, I encountered an issue with the default HTML5 code snippet. My custom background looked perfect except for a pesky black arrow appearing on the right side. In this image, you can see the problematic black arrow that needs to be removed. I attemp ...

javascriptcsshtmlinputtime

How can we redirect to another page after checking a box?

In the scenario where a checkbox is checked, how can the page be automatically redirected to @habit, simulating the behavior of clicking a submit button? habits/show <% if @habit.current_level_strike %> <div class="btn" id="red"> <l ...

javascriptjqueryruby-on-railsrubyajax

How can I put a row at full-width in a Material-UI table in React

I need assistance with displaying data in a table using JSX code: const StudentsTable = (props) => { const classes = useStyles(); return ( <TableContainer component={Paper}> <Table className={classes.table} aria-label="simple ...

javascriptreactjsmaterial-ui

Is the Site Header displayed depending on the scroll position and direction of scrolling?

On my website, I have a header that I want to hide when the user scrolls down 100px and show again when they scroll up 50px. I attempted to write a script for this functionality, but it doesn't seem to be working as expected. CSS /* This CSS rule w ...

javascriptjquerycsselementor

Next and Nest servers enable the handling of SSR and client requests separately using distinct frontend and backend servers

Currently, I have a NestJS backend that holds the data, including user information, and a NextJS frontend. In my setup, Next redirects all requests to an /api route to Nest, where authentication and data serving take place. Authentication is done by Nest u ...

authenticationnext.jsnestjs

"Exploring the process of integrating angular-xeditable into a MeanJS project

I recently attempted to install angular-xeditable from the link provided, but encountered issues while trying to reference the JavaScript files in layout.html after downloading it with bower. According to the documentation, these files should be added auto ...

javascriptangularjsmeanjsangular-xeditable

What is the best way to compare two date strings with the format dd/mm/yyyy using JavaScript?

When attempting to compare a "Date" type of data with an "Any" type of data, the comparison is not functioning as expected. The date is retrieved in the following code: var today = new Date(); var dd = String(today.getDate()).padStart(2, '0'); v ...

javascripttypescript

Preventing long int types from being stored as strings in IndexedDB

The behavior of IndexedDB is causing some unexpected results. When attempting to store a long integer number, it is being stored as a string. This can cause issues with indexing and sorting the data. For instance: const data: { id: string, dateCreated ...

javascripttypescriptindexeddb

Ways to verify the occurrence of a successful event following the execution of a save() operation on a model

Below is the snippet of code I am using to store extra properties in a model (specifically, the answer model) selectMedia: => # Post media to server @options.answer.id = @options.answer.get('_id') @options.answer.url = "/v1/answers/#{@o ...

javascriptajaxbackbone.jscoffeescript

Use ajax to add rows to the second-to-last table

I am facing a situation where I have a table with 25 default rows. When scrolling to the bottom of the table, I want to dynamically insert another set of 25 rows. Everything is functioning correctly, but in a specific scenario, I need to preserve the last ...

javascriptjqueryajaxdocument-body

JavaScript can be used to arrange a table in both ascending and descending order by simply clicking on the header

window.addEventListener('DOMContentLoaded', () => { let dir = "dsc"; th = document.getElementsByTagName('th'); for(let c=0; c < th.length; c++){ th[c].addEventListener('click',item(c)); } ...

javascriptsorting

Having difficulty linking a click event to an Anchor tag within a React component

Here is the code snippet for ComponentA.js: This is the return statement inside the component return ( ...... <a id="MytoolTip" ...... <ComponentB content={ ` <div class="share_cart_tt ...

javascriptreactjsdom-events

Next.js is like Gatsby but with the power of GraphQL

I'm curious if it's possible to set up GraphQL in Next.js similar to how it's done in Gatsby, allowing me to query pages and retrieve data from them. Are there any plugins available for Next.js that work like Gatsby-file-source and gatsby-ma ...

javascriptnext.jsgraphqlgatsby

Having trouble getting a JS file to work with the Laravel Inertia.js and Vue.js3 template

Just getting started with inertia.js and facing an issue. My CSS styles are being applied, but my JavaScript file isn't functioning as expected. I'm working on an admin dashboard using Laravel 9 and vue.js-3 with a custom HTML template. Interes ...

javascriptvue.jsvuejs3laravel-9inertiajs

Use JQuery's $ajax to exclusively retrieve items that have a date prior to the current date

In my jQuery code, I have a function called fetchResults that makes an AJAX request to '/Search/GetResults' and returns the JSON-formatted data. This endpoint does not require any specific criteria to be passed. The returned data looks like this ...

javascriptjqueryjsonajax

Ways to prevent decreasing the value below zero in ReactJS?

I have created two buttons, one for increasing and another for decreasing a counter value. However, when I click on the minus button, it should not display negative values. But in my case, when I click on the minus button (initially at zero), it shows -1, ...

javascripthtmlreactjs

Is the Vis.js network function ready to go?

Utilizing the Vis.js network library to display graphs and am curious if there is a dedicated finishedLoading event available for this object? Any suggestions or insights are appreciated! ...

javascriptvis.js-networkvis.js

Attempting to output numerical values using Jquery, however instead of integer values, I am met with [Object object]

I am struggling to figure out how to display the value contained in my object after attempting to create a Calendar using Jquery. I attempted to use JSON.toString() on my table data, but it didn't solve the issue. Perhaps I am not placing the toString ...

javascripthtmljquerycss

Maintaining personalized variable values for individual connected clients in Node.js: What's the best approach?

I have recently started working with Node.js and I am using Visual Studio 2015 with the Basic Node.js Express 4 app template. After setting some values through a post request from the client, I noticed that when I open another tab and send another post re ...

javascriptnode.jsexpress

Best practices for sending variables to an HTML page using nodemailer

I am interested in sending an email with an HTML template that includes dynamic data. For example, I want to include a unique id within a link on the page. Is it possible to insert dynamic data into HTML content when sending emails? If yes, I would apprec ...

javascripthtmlnode.jsexpressnodemailer