0

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": "yarn@3.2.0"
}
Pranshu_Taneja
  • 186
  • 1
  • 1
  • 16
  • https://babeljs.io/docs/babel-plugin-proposal-optional-chaining. However that is one of your deps using optional chaining and you're using CRA. You need to somehow transpile that dep during your build. – morganney Apr 01 '23 at 12:59
  • In the error there is: File was processed with these loaders: * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js Well the error says that its using babel loader. SO do i still need to transpile the code during build. Not really comfortable with these things of transpiling and all that? Any thoughts? – Pranshu_Taneja Apr 01 '23 at 13:06
  • Find an earlier version that doesn't use optional chaining or eject your build so you can customize. Your project has a ton of dependencies, do you really need them all? – morganney Apr 01 '23 at 13:10
  • Yeahh actually i need to add some features into this project so unfortunately yeah!! But do you mean like switching to earlier version of node or anything else? – Pranshu_Taneja Apr 01 '23 at 13:14
  • Here is the issue: https://github.com/torusresearch/torus-embed/blob/develop/src/utils.ts#L117. It has always been coded like that and you are on webpack 4. You can try upgrading your react-scripts to use webpack 5 which supports optional chaining or eject your build so you can configure webpack to transpile deps from node_modules. You can also run that file through babel before starting your build. – morganney Apr 01 '23 at 13:22

0 Answers0