Notifications Empty Screen

import { Image } from '@mantine/core'; import image from '@/images/notifications-missing-styles.png'; import { Layout } from '@/layout';

export const meta = { title: "Why is my screen completely empty after I've added the notifications package?", description: 'You have used Notifications component incorrectly', slug: 'notifications-empty-screen', category: 'common', tags: ['notifications', 'white screen'], created_at: 'July 15, 2024', last_updated_at: 'July 15, 2024', };

export default Layout(meta);

Notifications component

A common error when using the @mantine/notifications package is to wrap your application with the Notifications component:

// ❌ This is incorrect
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';

function Demo() {
  return (
    <MantineProvider>
      <Notifications>
        <App />
      </Notifications>
    </MantineProvider>
  );
}

How to fix

The Notifications component does not support the children prop. If you put your application inside it, it will not be rendered. Instead, you should render the Notifications component as a sibling to your application:

// ✅ This is correct
import { MantineProvider } from '@mantine/core';
import { Notifications } from '@mantine/notifications';

function Demo() {
  return (
    <MantineProvider>
      <Notifications />
      <App />
    </MantineProvider>
  );
}