When I try to import a component from @availity, I get a compiler error:
Failed to compile.
./node_modules/@availity/form/src/Checkbox.js
SyntaxError: /home/admin/node_modules/@availity/form/src/Checkbox.js:
Support for the experimental syntax 'jsx' isn't currently 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/vb4yA)
to the 'plugins' section to enable parsing.
I've tried for hours, adding the requested presets to my babel config via package.json, .babelrc , babel.config.json, deleting node_modules + yarn.lock, installing/uninstall various packages, and so on.
App.js:
import React from 'react'
import { Form } from '@availity/form'
const App = () => {
return null
}
export default App
package.json:
{
"dependencies": {
"@availity/form": "^0.5.34",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3"
},
...
}
Software:
- ubuntu 20.04 running in a vm
- node 16.3.0
- yarn 1.22.5
I tried moving the node_modules source for @availity/form into my project's src, then importing from it directly, and it runs just fine:
import React from 'react'
import { Form } from './@availity/form'
const App = () => {
return null
}
export default App