Support for the experimental syntax 'jsx' isn't currently enabled

[fasenderos]

I have installed availity with yarn add @availity/form @availity/yup yup and imported with

import { FormGroup, Form, Input } from "@availity/form";
import "@availity/yup";
import * as yup from "yup";
...

 <Form
        initialValues={{
          hello: "",
        }}
        onSubmit={() => ({})}
        validationSchema={yup.object().shape({
          hello: yup.string().isRequired(true, "This Field is Required."),
        })}
      >
   <FormGroup for="hello">
      <Label for="hello">Hello Field</Label>
      <Input name="hello" />
   </FormGroup>
</Form>

I get this error even though I didn't import Checkbox on this components

./node_modules/@availity/form/src/Checkbox.js
SyntaxError: C:\Users\....\myproject\node_modules\@a
vaility\form\src\Checkbox.js: Support for the experimental syntax 'jsx' isn't cu
rrently enabled (29:5):

  27 |
  28 |   return (
> 29 |     <FormGroup
     |     ^
  30 |       for={inputId}
  31 |       className={groupClassName}
  32 |       check

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your
Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4y
A) to the 'plugins' section to enable parsing.

I have tried to add to babel.config.json the following options:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-jsx"]
}

[LMarlett]

Im also looking for a solution for this error

[DXAizpiri]

Hello! Any progress on this? I am experiencing the same error when I have started trying to migrate from the old availity-reacstrap-validation library to this one, as commented by @fasenderos. I also tried adding the preset to babel.config.json and did a test with .babelrc as well with no luck ...

I realized that the problem was also reported on stackoverflow 4 months ago (and it was opened here since a month and a half) ... So I am worried if someone is going to get rid of it or maybe it was already solved in another thread / theme? Thanks in advance! https://stackoverflow.com/questions/67994385/using-availity-with-react-scripts-support-for-the-experimental-syntax-jsx-i

[jordan-a-young]

I believe this issue can be fixed in one of two ways. I'm not sure which, but you can try both.

The first is make sure you are using babel-loader with your webpack config, and that it is looking for js and jsx extensions. Here is how we handle it.

The other thing that could help is to make sure you are using babel-preset-react-app. We use it this way

I'm not an expert on this, but all of our apps at Availity use those settings and we do not have any issues.