0

I am getting the following error in my React project when trying to import ethers:

./node_modules/ethers/lib.esm/abi/abi-coder.js
SyntaxError: /node_modules/ethers/lib.esm/abi/abi-coder.js: Support for the experimental syntax 'classPrivateProperties' isn't currently enabled (107:5)

How can I enable support for the experimental syntax classPrivateProperties?

My package.json looks like this:

{
  "name": "bradshawknox",
  "description": "A simple manage plan app powered by Stacks.js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@blockstack/ui": "^2.12.14",
    "@coreui/react": "^4.5.2",
    "@emotion/core": "^11.0.0",
    "@emotion/css": "^11.0.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/material": "^5.11.8",
    "@reduxjs/toolkit": "^1.5.1",
    "@stacks/connect": "^4.3.18",
    "@stacks/storage": "^1.3.3",
    "@walletconnect/web3-provider": "^1.8.0",
    "axios": "^0.21.1",
    "blockstack": "^19.3.0",
    "ckeditor4-react": "^1.4.1",
    "ckeditor5-custom-build": "file:./ckeditor5",
    "emailjs-com": "^2.6.4",
    "ethers": "^6.0.2",
    "export-from-json": "^1.3.4",
    "file-saver": "^2.0.5",
    "firebase": "^8.4.1",
    "html2canvas": "^1.0.0-rc.7",
    "jquery": "^3.6.0",
    "jspdf": "^2.3.1",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "ra-data-simple-rest": "^3.13.4",
    "radiks": "^0.2.2-beta.1",
    "react": "^16.13.1",
    "react-admin": "^3.15.1",
    "react-bootstrap": "^1.6.0",
    "react-bootstrap-sweetalert": "^5.2.0",
    "react-dark-mode-toggle": "^0.2.0",
    "react-datepicker": "^3.8.0",
    "react-dom": "^16.13.1",
    "react-firebase-hooks": "^3.0.3",
    "react-google-recaptcha": "^2.1.0",
    "react-loadingg": "^1.7.2",
    "react-recaptcha": "^2.3.10",
    "react-recaptcha-google": "^1.1.1",
    "react-redux": "^7.2.3",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^3.4.1",
    "react-spinners": "^0.10.6",
    "react-table-v6": "^6.8.6",
    "react-toast-notifications": "^2.4.3",
    "reactstrap": "^9.1.5",
    "redux": "^4.0.5",
    "redux-persist": "^6.0.0",
    "request": "^2.88.2",
    "request-promise": "^4.2.6",
    "styled-components": "^5.2.1",
    "use-dark-mode": "^2.3.1",
    "uuid": "^8.1.0"
  },
  "prettier": "@blockstack/prettier-config",
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject",
    "lint": "eslint src/**/*.{js,jsx}",
    "lint:fix": "eslint src/**/*.{jsx,js} --fix"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@blockstack/eslint-config": "^1.0.5",
    "@blockstack/prettier-config": "0.0.6",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint-config-react-app": "^5.2.1",
    "react-addons-test-utils": "^15.6.2",
    "react-app-rewired": "^2.0.1"
  },
  "proxy": "http://localhost:2000"
}
2

1 Answer 1

0

To enable support for the experimental syntax classPrivateProperties you have to use babel in your project:

  1. Add devDependencies by running:

npm i @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties --save-dev

  1. Create .babelrc file in your root folder with the following content:

{"presets": ["@babel/preset-env", "@babel/preset-react"],"plugins": ["@babel/plugin-proposal-class-properties"]}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.