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, privacy policy and cookie policy

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