Ethers.js – Error When Importing Ethers into a React Project

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

Failed to compile.

./node_modules/ethers/lib.esm/abi/abi-coder.js 107:2
Module parse failed: Unexpected character '#' (107:2)
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.
|   */
| export class AbiCoder {
>   #getCoder(param) {
|     if (param.isArray()) {
|       return new ArrayCoder(this.#getCoder(param.arrayChildren), param.arrayLength, param.name);

These are my configuration files:

package.json

{
  "name": "bradshawknox",
  "description": "A simple manage plan app powered by Stacks.js",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@adraffy/ens-normalize": "^1.8.9",
    "@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",
    "@gnosis.pm/safe-apps-sdk": "^7.8.0",
    "@gnosis.pm/safe-apps-web3modal": "^1.0.0",
    "@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",
    "babel-plugin-shebang": "^1.0.0",
    "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",
    "shebang-loader": "^0.0.1",
    "styled-components": "^5.2.1",
    "use-dark-mode": "^2.3.1",
    "uuid": "^8.1.0",
    "web3": "^1.8.2",
    "web3modal": "^1.9.12"
  },
  "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": {
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@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"
}

.babelrc

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

config-overrides.js

module.exports = {
  webpack: function (config, env) {
    return config;
  },
  jest: function (config) {
    return config;
  },
  // configFunction is the original react-scripts function that creates the
  // Webpack Dev Server config based on the settings for proxy/allowedHost.
  // react-scripts injects this into your function (so you can use it to
  // create the standard config to start from), and needs to receive back a
  // function that takes the same arguments as the original react-scripts
  // function so that it can be used as a replacement for the original one.
  devServer: function (configFunction) {
    return function(proxy, allowedHost) {
      const config = configFunction(proxy, allowedHost);
      // Edit config here - example: set your own certificates.
      //
      // const fs = require('fs');
      // config.https = {
      //   key: fs.readFileSync(process.env.REACT_HTTPS_KEY, 'utf8'),
      //   cert: fs.readFileSync(process.env.REACT_HTTPS_CERT, 'utf8'),
      //   ca: fs.readFileSync(process.env.REACT_HTTPS_CA, 'utf8'),
      //   passphrase: process.env.REACT_HTTPS_PASS
      // };
            config.headers = {
                "Access-Control-Allow-Origin": "*",
                "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE",
                "Access-Control-Allow-Headers": "Content-Type"
            }

      return config;
    };
  }
}