How to resolve need additional loader installation error?

Question

I am stuck in an issue. I can't even start making the change to the project as its not even starting. installed all the dependencies and when i started by yarn start then i got this issue.

• I tried to solve this by downgrading my node to 14.21.3

• I installed this package also babel-plugin-syntax-optional-chaining

But nothing seems to work out

Edit: I am working on ubuntu OS: Ubuntu 22.04.2 LTS x86_64

Here is the error:

./node_modules/@web3-react/torus-connector/node_modules/@toruslabs/torus-embed/dist/torus.esm.js 639:12
Module parse failed: Unexpected token (639:12)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| function logStreamDisconnectWarning(remoteLabel, error, emitter) {
|   var warningMsg = "MetaMask: Lost connection to \"".concat(remoteLabel, "\".");
>   if (error?.stack) {
|     warningMsg += "\n".concat(error.stack);
|   }

Here is my package.json

{
  "name": "",
  "version": "2.0.0",
  "repository": "",
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
    "@davatar/react": "^1.8.1",
    "@ethersproject/providers": "^5.4.1",
    "@fortawesome/fontawesome-svg-core": "~1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@pancakeswap/sdk": "^2.4.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@toruslabs/torus-embed": "1.36.3",
    "@types/humanize-plus": "^1.8.0",
    "@types/jest": "^26.0.9",
    "@types/node": "^14.0.27",
    "@types/react": "^16.9.46",
    "@types/react-helmet": "^6.1.5",
    "@types/react-redux": "^7.1.9",
    "bignumber.js": "^9.0.0",
    "clsx": "^1.1.1",
    "ethers": "^5.4.1",
    "graphql": "^15.0.0",
    "material-ui-image": "^3.3.2",
    "moment": "^2.29.1",
    "node-sass": "^7.0.1",
    "numeral": "^2.0.6",
    "react": "^16.13.1",
    "react-circular-progressbar": "^2.0.3",
    "react-countdown": "^2.2.1",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-feather": "^2.0.8",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-loading-skeleton": "^2.1.1",
    "react-modal-video": "^1.2.8",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.1",
    "react-spring": "^8.0.27",
    "redux-localstorage-simple": "^2.3.1",
    "styled-components": "^5.1.1",
    "typescript": "^4.1.6",
    "use-wallet": "OGBoogieTomb/use-wallet",
    "web3": "^1.2.11"
  },
  "resolutions": {
    "@web3-react/walletconnect-connector": "6.2.8",
    "@babel/preset-env": "7.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI= GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "devDependencies": {
    "@types/numeral": "0.0.28",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/styled-components": "^5.1.2",
    "babel-plugin-syntax-optional-chaining": "^7.0.0-alpha.13",
    "prettier": "2.3.1"
  },
  "packageManager": "[email protected]"
}