@types/react installation mismatch

[bobbysciacchitano]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.14.3

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

I'm currently building a menu component and came across this exception why trying to build (TS):

Type error: 'Menu.Target' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not assignable to type '(props: any) => ReactNode'.
      Type 'import("/Users/bobby/Documents/Development/embark/node_modules/@mantine/core/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.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'.

This is my example implementation which I could reproduce the issue:

import { Button, Menu } from "@mantine/core";

type EntrySettingsProps = {
  form: Partial<SessionEntry | ProgramEntry>;
  onChange: OnFormChange;
  validation: ValidationErrors;
};

export function EntrySettings({}: EntrySettingsProps) {
  return (
    <Menu>
      <Menu.Target>
        <Button>Toggle menu</Button>
      </Menu.Target>
      <Menu.Dropdown>
        <Menu.Item>Testing</Menu.Item>
      </Menu.Dropdown>
    </Menu>
  );
}

package.json file:

  "dependencies": {
    "@mantine/core": "^7.14.3",
    "@mantine/hooks": "^7.14.3",
    "date-fns": "^4.1.0",
    "next": "15.0.4",
    "react": "19.0.0",
    "react-dom": "19.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^8",
    "eslint-config-next": "15.0.4",
    "postcss": "^8.4.49",
    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
    "prettier": "^3.3.3",
    "typescript": "^5"
  }

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

https://mantine.dev/guides/next/#compound-components-in-server-components

[kenzaflow]

After update to React 19:

This is also happening in Vite (SPA), even with MenuTarget (no Menu.Target)

Only in that component

'MenuTarget' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not assignable to type '(props: any) => ReactNode'.
      Type 'import(".../node_modules/@mantine/core/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.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)

[bobbysciacchitano]

Having reviewed the documentation, adding "use client" to the start of the module still causes an exception for me.

Build time error:

Type error: 'Menu.Target' cannot be used as a JSX component.
  Its type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not a valid JSX element type.
    Type 'ForwardRefExoticComponent<MenuTargetProps & RefAttributes<HTMLElement>>' is not assignable to type '(props: any) => ReactNode'.
      Type 'import("/Users/bobby/Documents/Development/embark/node_modules/@mantine/core/node_modules/@types/react/index").ReactNode' is not assignable to type 'React.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'.

"use client";

import { Button, Menu } from "@mantine/core";

type EntrySettingsProps = {
  form: Partial<SessionEntry | ProgramEntry>;
  onChange: OnFormChange;
  validation: ValidationErrors;
};

export function EntrySettings({}: EntrySettingsProps) {
  return (
    <Menu> 
      <Menu.Target>
        <Button>Button</Button>
      </Menu.Target>

      <Menu.Item>Hello World</Menu.Item>
    </Menu>
  );
}

[rtivital]

Okay, this is a ts issue, probably with @types/react. Can you reproduce it in codesandbox?

[kenzaflow]

I just tried with vite-min-template and nothing, I'm going to try with the one with eslint

Edit: also not a problem with vite-template

Here is the sandbox with vite-template + latest react (all dependencies updated with npx npm-check-updates && yarn install)

https://codesandbox.io/p/github/kenzaflow/vite-template/master?import=true

[rtivital]

Try adding resolutions to your package.json and reinstall dependencies:

"resolutions": {
  "@types/react": "19.0.1",
  "@types/react-dom": "19.0.1"
}

[dincerpece]

I installed only nextjs and mantine. I encountered the same problem in codesandbox.io. Then I installed it with yarn and built it and it worked without any problems.

yarn before:

yarn after:

https://codesandbox.io/p/github/dincerpece/mantine-react19-test/draft/distracted-feistel?workspaceId=ws_JmivbuKahEgQ2p1ZSV2BLi

[dincerpece]

Similarly, there was a problem locally before Yarn, but after the installation with Yarn, the problem disappeared. I hope it will be fixed without the need for an installation with Yarn.

local yarn before:

local yarn after:

[bobbysciacchitano]

Setting the resolutions to the suggested versions in yarn resolved my issue.

[felix-fuin]

"resolutions": {
  "@types/react": "19.0.1",
  "@types/react-dom": "19.0.1"
}

This solution works. (it should match versions installed)
And for those working with npm:

"overrides": {
  "@types/react": "19.0.1",
  "@types/react-dom": "19.0.1"
}

[rtivital]

The issue is not related to Mantine. If you see this message, it means that there are two conflicting versions of @types/react are installed. To fix it:

• With yarn and probably with pnpm

"resolutions": {
  "@types/react": "19.0.1",
  "@types/react-dom": "19.0.1"
}

• WIth npm:

"overrides": {
  "@types/react": "19.0.1",
  "@types/react-dom": "19.0.1"
}