Type 'bigint' is not assignable to type 'ReactNode'.

[lien-dkseo]

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.15.0

What package has an issue?

@mantine/form

What framework do you use?

Vite

In which browsers you can reproduce the issue?

None

Describe the bug

after upgrade to 7.15.0 from 7.14.3
An error occurred with npm run build.

[email protected]
[email protected]

.tsx:81:7 - error TS2322: Type '(value: unknown) => string | number | bigint | true | Iterable<ReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | Promise<...> | null' is not assignable to type 'Rule<string, { email: string; password: string; }>'.
  Type 'string | number | bigint | true | Iterable<ReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | Promise<...> | null' is not assignable to type 'ReactNode'.
    Type 'bigint' is not assignable to type 'ReactNode'.

81       email: isEmail("Invalid email"),
         ~~~~~

.tsx:82:7 - error TS2322: Type '(value: unknown) => string | number | bigint | true | Iterable<ReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | Promise<...> | null' is not assignable to type 'Rule<string, { email: string; password: string; }>'.
  Type 'string | number | bigint | true | Iterable<ReactNode> | ReactElement<unknown, string | JSXElementConstructor<any>> | Promise<...> | null' is not assignable to type 'ReactNode'.
    Type 'bigint' is not assignable to type 'ReactNode'.

82       password: hasLength(
         ~~~~~~~~

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]

Please provide a sandbox with a minimal reproduction

[ayovev]

I'm encountering the same issue in my repository as well. It seems like with the latest release of Mantine (v7.15.0) something changed in the return types of the validator functions not matching up with the keys in the validate property. Here's a form that I have declared in my app and I'm getting the type error mentioned above specifically in the keys of the validate property (about, firstName, lastName, location).

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]

const form = useForm<ProfileFormValues>({
    enhanceGetInputProps: (payload) => {
      let enhancedProps: object = {
        onBlur: () => {
          if (payload.form.isDirty(payload.field)) {
            handleSubmit();
          }
        }
      };

      if (!payload.form.initialized) {
        enhancedProps = { ...enhancedProps, disabled: true };
      }

      return enhancedProps;
    },
    validate: {
      about: hasLength({ max: 500 }, "Bio must be 500 characters or less"),
      firstName: hasLength({ min: 2, max: 50 }, "First name must be 2-50 characters long"),
      lastName: hasLength({ min: 2, max: 50 }, "Last name must be 2-50 characters long"),
      location: hasLength({ max: 100 }, "Location must be 100 characters or less")
    },
    transformValues: (values) => {
      return {
        ...values,
        about: values.about.trim(),
        firstName: values.firstName.trim(),
        lastName: values.lastName.trim(),
        location: values.location.trim()
      };
    }
  });

[Athou]

Same thing happens in this renovate PR for CommaFeed. If it helps, the error happens here.

A simple reproducer :

    const form = useForm<{ file: File }>({
        validate: {
            file: isNotEmpty("required"),
        },
    })

[rtivital]

It might be related to duplicated @types/react package, try following this if you use React 19 – #7227 (comment)

If you use react 18, then types need to be fixed for 18.x both for react and react-dom

[guy-ecton]

Happens to us as well.
Doesn't happen with mantine 7.14.3, which, for example, resolves the type of isNotEmpty like this:

export function isNotEmpty(error?: React.ReactNode, ): (value: unknown) => (string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null)

With mantine 7.15.x:

export function isNotEmpty(error?: React.ReactNode, ): (value: unknown) => (string | number | bigint | true | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<...>> | Iterable<React.ReactNode> | null | undefined> | null)

Both scenarios are tested with:

{
  "name": "test",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
  },
  "dependencies": {
    "@mantine/core": "^7.15.1",
    "@mantine/form": "^7.15.1",
    "@mantine/hooks": "^7.15.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
  },
  "devDependencies": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@typescript-eslint/eslint-plugin": "^8.18.0",
    "@typescript-eslint/parser": "^8.18.0",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-only-warn": "^1.1.0",
    "eslint-plugin-react": "^7.37.2",
    "eslint-plugin-react-hooks": "^5.1.0",
    "eslint-plugin-react-refresh": "^0.4.16",
    "postcss": "^8.4.49",
    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
    "typescript": "^5.7.2",
    "vite": "^6.0.3"
  }
}

[rtivital]

Have you tried following example solution from the linked comment?

[guy-ecton]

Have you tried following example solution from the linked comment?

Yes.
We're not using react 19.
Double checked package-lock.json doesn't have react 19 stuff.
Added the overrides

  "overrides": {
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1"
  }

and npm i didn't find anything to install.
Delete package-lock.json and node_modules, npm i, and ended up in same situation.

While I understand its not necessary a mantine issue, downgrading to 7.14.3 makes the error go away, and it happens only in mantine form validators.

[SqlOwl]

I am experiencing same issue with my project set to React 18+. Just upgraded to latest version of mantine

[SqlOwl]

I am on NextJS 15.0.4 with react 18.3.1 going down to mantine 7.14.3 did not solve the problem for me

[rtivital]

I still cannot reproduce the issue, here is an example in codesandbox – https://codesandbox.io/p/sandbox/mantine-react-template-forked-23qg8f

[SqlOwl]

[SqlOwl]

For Now I am disabling typescript to continue

[Athou]

I still cannot reproduce the issue, here is an example in codesandbox – https://codesandbox.io/p/sandbox/mantine-react-template-forked-23qg8f

Thanks for the codesandbox! I get the error on the codesandbox if I add the <{ file:File }> type to useForm()

[rtivital]

Thanks for the codesandbox! I get the error on the codesandbox if I add the <{ file:File }> type to useForm()

It is not related to the issue.

[Athou]

Thanks for the codesandbox! I get the error on the codesandbox if I add the <{ file:File }> type to useForm()

It is not related to the issue.

I'm sorry I don't understand :( What do you mean it's not related to the issue? If it helps, the error also happens with an initial value for file of "" instead of null.

[rtivital]

"" is not type of File.

[Athou]

"" is not type of File

Here's a codesandbox that reproduces the issue : https://codesandbox.io/p/sandbox/mantine-react-template-forked-3ltz32

[rtivital]

Thanks for the reproduction, I've found and fixed the issue, it will be available with 7.15.2 patch

[SqlOwl]

Will this fix in 7.15.2 support react 19+

[rtivital]

This issue is not related to react 19.

[lien-dkseo]

@rtivital good~

[yatesco]

same here - copying in the example from https://mantine.dev/form/uncontrolled/ is enough to get the error:

import { useState } from 'react';
import { Button, Code, Text, TextInput } from '@mantine/core';
import { hasLength, isEmail, useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'controlled',
    initialValues: { name: '', email: '' },
    validate: {
      name: hasLength({ min: 3 }, 'Must be at least 3 characters'),
      email: isEmail('Invalid email'),
    },
  });

  const [submittedValues, setSubmittedValues] = useState<typeof form.values | null>(null);

  return (
    <form onSubmit={form.onSubmit(setSubmittedValues)}>
      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
      <TextInput {...form.getInputProps('email')} mt="md" label="Email" placeholder="Email" />
      <Button type="submit" mt="md">
        Submit
      </Button>

      <Text mt="md">Form values:</Text>
      <Code block>{JSON.stringify(form.values, null, 2)}</Code>

      <Text mt="md">Submitted values:</Text>
      <Code block>{submittedValues ? JSON.stringify(submittedValues, null, 2) : '–'}</Code>
    </form>
  );
}

[rtivital]

The issue is fixed, the fix will be available in 7.15.2 patch.

[rtivital]

Fixed in 7.15.2