Back to all questions

Why my screen is completely empty after I've added notifications package?

Last updated

Notifications component

A common error of using @mantine/notifications package is to wrap your application with 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

Notifications component does not support children prop, if you put your application inside it, it will not be rendered. Instead, you should render 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>
  );
}