Web3 formatter.js loading issue

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.

Solution

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)

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