Web3 formatter.js loading issue

user_1326907 0
Viewed 2308

I am trying to create a small ethereum blockchain application with NextJS.

Import Web3 is causing some issue

ModuleParseError: Module parse failed: C:\Path\node_modules\web3-core-helpers\lib\formatters.js Unexpected token (296:20)
You may need an appropriate loader to handle this file type.
|     // If options !== undefined, don't blow out existing data
|     if (options.fromBlock === undefined)
|         options = { ...options, fromBlock: 'latest' };
|     if (options.fromBlock || options.fromBlock === 0)
|         options.fromBlock = inputBlockNumberFormatter(options.fromBlock);
    at C:\Path\node_modules\webpack\lib\NormalModule.js:303:19
    at C:\Path\node_modules\webpack\lib\NormalModule.js:209:11
    at C:\Path\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (C:\Path\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at C:\Path\node_modules\loader-runner\lib\LoaderRunner.js:205:4
    at C:\Path\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:70:14
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

The import Web3 from "web3"; is the root cause

import Web3 from "web3";

const web3 = new Web3(window.ethereum);

export default web3;

Here is my package.json

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "dev": "next dev"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@truffle/hdwallet-provider": "^1.2.2",
    "fs-extra": "^9.1.0",
    "ganache-cli": "^6.12.2",
    "mocha": "^8.3.0",
    "next": "^4.1.4",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "solc": "^0.4.17",
    "web3": "^1.3.4"
  }
}

Do I need other module ? I noticed that the same import is working when creating the app with npx create-next-app but I want to use specific version so I only used npm install --save next@4.1.4 react@16 react-dom@16 inside my node project.

web3 webpack next.js
4 Answers

The reason for this error is pretty visible in the message, its probably because of the ... notation in newer javascript, as the next you're using is old, it doesnt make sense of it. you have 3 options (I did the 3rd one)

  1. change that bit of code to old syntax using options = Object.assign(options, {fromBlock: latest})
  2. use newer next which can implement new syntax
  3. use older web3 which doesn't use new syntax, @1.2.9 works. dont forget to npm install
user_150389560

Use Web3 v1.2.9

Worked for me!

user_81402380

I ran into the same issues, and it seemed I was able to resolve it by updating next using the command "npm install next@10.0.7"

I came to this solution after running "npm audit" and it recommending the aforementioned command to resolve various dependency issues.

user_130155080
user_155915530
Related