Type error with Vibe components in React + TypeScript project

monday Apps & Developers
, ,
1

Hi :wave:

I would like to ask a question about Vibe components in Vite project with React and Typescript.
When I try to render any component from monday-ui-react-core package, I receive this kind of error in IDE:

'Button' cannot be used as a JSX component.
  Its type '((VibeComponent<ButtonProps & RefAttributes<unknown>, unknown> & Partial<{ sizes: { readonly SMALL: "small"; readonly MEDIUM: "medium"; readonly LARGE: "large"; readonly XXS: "xxs"; readonly XS: "xs"; }; colors: typeof ButtonColor; kinds: typeof ButtonType; types: typeof ButtonInputType; inputTags: typeof ButtonInpu...' is not a valid JSX element type.
    Type 'VibeComponent<ButtonProps & RefAttributes<unknown>, unknown> & Partial<{ sizes: { readonly SMALL: "small"; readonly MEDIUM: "medium"; readonly LARGE: "large"; readonly XXS: "xxs"; readonly XS: "xs"; }; colors: typeof ButtonColor; kinds: typeof ButtonType; types: typeof ButtonInputType; inputTags: typeof ButtonInputT...' is not assignable to type 'ElementType'.
      Type 'VibeComponent<ButtonProps & RefAttributes<unknown>, unknown> & Partial<{ sizes: { readonly SMALL: "small"; readonly MEDIUM: "medium"; readonly LARGE: "large"; readonly XXS: "xxs"; readonly XS: "xs"; }; colors: typeof ButtonColor; kinds: typeof ButtonType; types: typeof ButtonInputType; inputTags: typeof ButtonInputT...' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
        Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
          Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
            Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)

These are the project dependencies:

  "dependencies": {
    "monday-sdk-js": "^0.5.5",
    "monday-ui-react-core": "^2.116.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
  },
  "devDependencies": {
    ...,
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.5.2",
    "vite": "^5.3.1"
  }

It seems that since @types/react: ^18.2.8 there is the incompatibility with Vibe components, but when downgrading to earlier versions other JSX type issues come up.

Is there any solution to get rid of those errors?

2

Hello there @dziomek-soldevelo,

We checked this with the amazing team in charge of Vibe!

Following your report regarding an issue that occurs when using react 18.3+ alongside @types/react 18.3+ and Vibe.

We can confirm that the error that reads “cannot be used as a JSX component” is being shown by TS.

This is due to type conflicts arising from different versions of @types/react being used across dependencies.

Please take a look at this React 19 upgrade guide where they mention that React 18.3 is intended for making the upgrade to React 19 easier, and adds warning for deprecated APIs.

Therefore, to resolve this issue, we recommend adding the following configuration to your tsconfig.json file:

{
  "compilerOptions": {
    ...
    "paths": {
      "react": ["./node_modules/@types/react"]
    }
  }
}

This configuration forces TypeScript to use a single version of the React type definitions, ensuring consistency and preventing the mentioned errors.

Please let us know how that goes!

Cheers,
Matias

2 Likes
3

I just wanted to post the same question. I’m on version 2.105.0 of monday-ui-react-core and I also get the same errors. I tried to downgrade react dependencies but I can’t get my project to build correctly.

4

Hello there @ngruson,

If you have already tried the solution provided above by me and it did not work for you, please fill this form adding as much information as possible to it so that our team can take a look into it :smile:

5

The solution you provided works! :tada:

Thank you @Matias.Monday for investigating the problem with Vibe team and a quick response.

@ngruson FYI. I saw you had a similar problem.

6

The suggestion above works for me. I can succesfully compile my project again :slight_smile:.
Thank you, @Matias.Monday !

7

Hello everyone!

I am glad this is working for all of you now :smile:

Happy to help over here!

Cheers,
Matias