@babel/plugin-proposal-class-properties

[thielpeter]

Hey there,

I get the following error:

./node_modules/@availity/reactstrap-validation-select/AvResourceSelect.js
SyntaxError: ...\node_modules\@availity\reactstrap-validation-select\AvResourceSelect.js: Support for the experimental syntax 'classProperties' isn't currently enabled (16:10):

  14 |   }
  15 | 
> 16 |   select = createRef();
     |          ^
  17 | 
  18 |   loadOptions = (...args) => {
  19 |     const [inputValue, , additional = {}] = args;

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-class-properties (https://git.io/vb4yQ) to the 'plugins' section to enable parsing.

I tried to resolve it with the following changes in package.json:

"babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11"
  }

But still the error is present. After spending some hours on this im a bit lost. Maybe someone can give me a hint on this. Thank you!

[jordan-a-young]

Are you still experiencing this issue? This is how we handle it in our apps. Try that and see if it helps

[forest1206]

for create-react-app project, you can use https://github.com/gsoft-inc/craco to override Create React App Configuration.

create craco.config.js

module.exports = {
  babel: {
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: [
      [
        "@babel/plugin-proposal-class-properties",
        {
          loose: true,
        },
      ],
    ],
  },
  devDependencies: {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
  },
};

update package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  },
  ... ...

it will work out now