Some component from baseui
started giving me following errors:
'FormControl' cannot be used as a JSX component.
Its type 'typeof FormControl' is not a valid JSX element type.
Type 'typeof FormControl' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.
Construct signature return types 'FormControl' and 'Component<any, any, any>' are incompatible.
The types of 'refs' are incompatible between these types.
Type '{ [key: string]: import("/Users/artom/projects/price-templates/node_modules/baseui/node_modules/@types/react/index").ReactInstance; }' is not assignable to type '{ [key: string]: React.ReactInstance; }'.
That happend after i update package version to 14 from 13. When i downgrade version all ok. I saw many question like that, but nothing can help me
Some Code:
import { FormControl } from 'baseui/form-control';
import { ToasterContainer, toaster } from 'baseui/toast';
import { SegmentedControl, Segment } from 'baseui/segmented-control';
import { useAppData } from 'context';
import SingleInputForm from 'components/SingleInputForm';
import './styles.css';
const SettingsPage = () => {
const {
storeUrl,
storeName,
currencySymbol,
// setCurrencySymbol,
setStoreName,
// setStoreUrl,
} = useAppData();
return (
<ToasterContainer>
<div className="settingsPage">
<div className="settingsPage_formWrapper">
<div>
<FormControl label="some label">
<SingleInputForm
onSave={(s) => toaster.info(<p>{s}</p>)}
defaultValue={storeUrl}
/>
</FormControl>
</div>
<div>
<FormControl label="some label">
<SingleInputForm onSave={setStoreName} defaultValue={storeName} />
</FormControl>
</div>
<div>
<FormControl label="some label">
<SegmentedControl
activeKey={currencySymbol}
onChange={({ activeKey }) => {
console.log(activeKey);
// setCurrencySymbol(activeKey);
}}
>
<Segment key="0" label="Label 1" />
<Segment key="1" label="Label 2" />
<Segment key="2" label="Label 3" />
</SegmentedControl>
</FormControl>
</div>
</div>
</div>
</ToasterContainer>
);
};
export default SettingsPage;
package.json
{
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-pdf/renderer": "^3.1.14",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.66",
"baseui": "^14.0.0",
"classnames": "^2.3.2",
"eslint": "^8.56.0",
"moment": "^2.30.1",
"qr-code-generator-lib": "^1.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.48.2",
"react-qr-code": "^2.0.12",
"react-router-dom": "^6.21.0",
"react-scripts": "5.0.1",
"styletron-engine-atomic": "^1.6.2",
"styletron-react": "^6.1.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"xlsx": "^0.18.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/react": "^18.2.65",
"@types/react-dom": "^18.2.22",
"@typescript-eslint/parser": "^6.18.1",
"eslint-config-airbnb-typescript": "^17.1.0"
}
}
i tried to install latest versions of @types
react/react-dom but miracle doesnt happend