Importing web3 cause error: You may need an additional loader to handle the result of these loaders

[jasonhtpham]

Expected behavior

Web3 gets imported and ready to be used.

Actual behavior

Failed to compile

./node_modules/web3/dist/web3.min.js 4323:57
Module parse failed: Unexpected token (4323:57)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 b = f(y * v),
|                 E = f(h * v),
>                 _ = g.BASE.multiplyAndAddUnsafe(l, b, E)?.toAffine();
|               return !!_ && f(_.x) === h;
|             },

When I remove the import of the web3 my application works fine.

Steps to reproduce the behavior

1. Install web3 using: npm i web3
2. Import web3 and export the created web3 instance
3. Run npm start

Logs

N/A

Environment

This is my package.json:

{
  "name": "react-frontend-boilerplate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "~7.17.5",
    "@emotion/react": "~11.5.0",
    "@emotion/styled": "~11.3.0",
    "@fontsource/montserrat": "^5.0.5",
    "@iconify/react-with-api": "~1.0.0-rc.7",
    "@mui/icons-material": "~5.4.2",
    "@mui/material": "~5.4.2",
    "@mui/styles": "~5.4.2",
    "@randlabs/myalgo-connect": "~1.4.2",
    "@tinymce/tinymce-react": "~3.13.0",
    "axios": "~0.26.0",
    "date-fns": "~2.28.0",
    "dotenv": "^16.0.3",
    "eslint": "~7.11.0",
    "eslint-utils": "~2.1.0",
    "firebase": "^9.17.1",
    "formik": "~2.2.9",
    "idb": "~6.0.0",
    "lodash": "~4.17.21",
    "lodash.template": "~4.5.0",
    "material-design-icons-updated": "~7.0.0",
    "prop-types": "~15.7.2",
    "react": "~17.0.2",
    "react-device-detect": "~1.17.0",
    "react-dom": "~17.0.2",
    "react-router-dom": "~6.2.1",
    "react-scripts": "~4.0.3",
    "socket.io-client": "~3.1.3",
    "twilio": "~3.74.0",
    "twilio-video": "~2.20.1",
    "typeface-roboto": "~1.1.13",
    "uuid": "~8.3.2",
    "web3": "^4.1.2",
    "yup": "~0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "resolutions": {
    "lodash": "~4.17.15",
    "eslint-utils": "~1.4.2",
    "lodash.template": "~4.5.0",
    "set-value": "~3.0.1",
    "mixin-deep": "~2.0.1",
    "react-error-overlay": "~6.0.9"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "~7.21.0",
    "@babel/plugin-proposal-private-property-in-object": "~7.21.11",
    "cross-fetch": "~3.1.4",
    "easter-egg-collection": "~1.4.56",
    "eslint-plugin-react": "~7.27.0",
    "eslint-plugin-react-hooks": "~4.2.0",
    "react-error-overlay": "~6.0.9"
  }
}

This is my web3.js file:

import Web3 from "web3";
export const web3 = new Web3(Web3.givenProvider || "http://127.0.0.1:8545");

[Muhammad-Altabba]

Hello @jasonhtpham ,
In web3 v4, this is how you import it:

import { Web3 } from "web3";

This is documented in the migration guide in the docs.

I will close the issue. However, please, feel free to open it if you used this and you are still facing the same error. And if you used this but faced another error message. Please open a new issue for it.

Have a nice day,

[jasonhtpham]

Hi @Muhammad-Altabba, I just tried:

import { Web3 } from 'web3';
export const web3 = new Web3(Web3.givenProvider || "ws://localhost:8545");

It still gives the same error.

[Muhammad-Altabba]

Thanks @jasonhtpham ,
We will look into it...
Could you please provide a full example where we can produce the same error? You might refer to a small repository on GitHub or create a sample on a Cloud IDE like https://codesandbox.io/.
Thanks,

[jasonhtpham]

Hi @Muhammad-Altabba, please refer to this repo:

https:/jasonhtpham/react-boilerplate.git

I used this as testing codebase. I added web3 to package.json, I imported the web3 package in /Users/deakin/Documents/dev/react-frontend-boilerplate/src/views/dependants/Example/Example.js.

Then, I installed and ran using npm as usual. Then, I faced the same issue.

I am using:

• Node v16.13.1.
• npm 8.1.2

[jdevcs]

I am also able to reproduce above issue, and got:

./node_modules/web3/dist/web3.min.js 4323:57
Module parse failed: Unexpected token (4323:57)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|                 b = f(y * v),
|                 E = f(h * v),
>                 _ = g.BASE.multiplyAndAddUnsafe(l, b, E)?.toAffine();
|               return !!_ && f(_.x) === h;
|             },

@jasonhtpham Thanks for details. It should be investigated and fixed in next sprint.
cc: @mconnelly8

[Muhammad-Altabba]

Hello @jdevcs ,
Does this error resolve when using this configuration in package.json for babel?: #6187 (comment)

"browserslist": {
    "production": [
      "chrome >= 67",
      "edge >= 79",
      "firefox >= 68",
      "opera >= 54",
      "safari >= 14"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

[Muhammad-Altabba]

Hello @jasonhtpham ,
I am investigating your issue and I noticed the usage of old versions for some dependencies. I suggest that you upgrade the dependencies to latest versions...

[Muhammad-Altabba]

Hi @jasonhtpham,
This error comes because babel-loader in your project does not understand the syntax ?. which is called "Optional Chaining" (https://2ality.com/2019/07/optional-chaining.html) which was introduced in ES2020.
And the error is supposed to be resolved once you update your project to be able to parse ES2020 (and it may be resolved if you disabled babel for node_modules. You may try that).

However, form our side, we will also work on ensuring the syntax used in the minified file is es5. And I created an issue to trace the work on this.