notifications problem with NextJS 15 and React 19

[devpanda0]

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

What package has an issue?

@mantine/notifications

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

All

Describe the bug

The problem is when i use notifications.show on page then come this error:

"use client";

import { Center, Flex, Table } from "@mantine/core";
import { Suspense, useEffect, useState } from "react";
import { deleteGroup, getGroups } from "@/app/cp/groups/actions";
import TableButton from "@/components/TableButton";
import { notifications } from "@mantine/notifications";

export default function Page() {
    const [groups, setGroups] = useState<any[]>([]);

    useEffect(() => {
        getGroups().then(setGroups);
    }, []);

    const deleteServerGroup = async (id: string) => {
        if (confirm('Are you sure you want to delete this group?')) {
            const res = await deleteGroup(id);
            if (res) {
                const groups = await getGroups();
                setGroups(groups);
                notifications.show({
                    title: "System",
                    message: "Group deleted successfully",
                    color: "green",
                    withBorder: true,
                    radius: 'md'
                });
            } else {
                notifications.show({
                    title: "System",
                    message: "Failed to delete group",
                    color: "red",
                    withBorder: true,
                    radius: 'md'
                });
            }
        }
    }

    return (
        <Center w={'100%'}>
            <Table.ScrollContainer minWidth={'20dvw'} w={'35dvw'}>
                <Table stickyHeader highlightOnHover withTableBorder>
                    <Table.Thead>
                        <Table.Tr>
                            <Table.Th w={'5rem'}>Name</Table.Th>
                            <Table.Th w={'1rem'} style={{textAlign: 'right'}}>Servers</Table.Th>
                            <Table.Th w={'2rem'} style={{textAlign: 'right'}}><TableButton size={24} type={'add'} href={'/cp/groups/create'} /></Table.Th>
                        </Table.Tr>
                    </Table.Thead>
                    <Table.Tbody>
                        <Suspense fallback={null}>
                            {groups.map(group => (
                                <Table.Tr key={group.id}>
                                    <Table.Td w={'5rem'}>{group.name}</Table.Td>
                                    <Table.Td w={'1rem'} style={{textAlign: 'right'}}>{group.servers}</Table.Td>
                                    <Table.Td w={'2rem'}>
                                        <Flex align={'center'} justify={'flex-end'} gap={5}>
                                            <TableButton type={'edit'} href={`/cp/groups/${group.id}`} />
                                            <TableButton type={'delete'} onClick={() => deleteServerGroup(group.id)} />
                                        </Flex>
                                    </Table.Td>
                                </Table.Tr>
                            ))}
                        </Suspense>
                    </Table.Tbody>
                </Table>
            </Table.ScrollContainer>
        </Center>
    );
}

Error: Route "/cp/servers/[id]": A component accessed data, headers, params, searchParams, or a short-lived cache without a Suspense boundary nor a "use cache" above it. We don't have the exact line number added to error messages yet but you can see which component in the stack below. 

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.