'FormControl' cannot be used as a JSX component 'Baseui'

28 Views Asked by At

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

0

There are 0 best solutions below