useNotification error

I'm trying to use useNotification hook to show some notifications. It is working, but i'm getting this error on console

 [antd: notification] Static function can not consume context like dynamic theme. Please use 'App' component instead.

 [antd: notification] Static function can not consume context like dynamic theme. Please use 'App' component instead.

how can I solve it?

5 Replies

kapa.ai•5mo ago

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error message you're seeing is suggesting that you use the App component from Ant Design to ensure that the notifications are also receiving the current theme configuration. You can solve this issue by wrapping your Refine component with the App component from antd. Here's an example of how you can do it:

import { Refine } from "@refinedev/core";  
import { useNotificationProvider, RefineThemes } from "@refinedev/antd";  
import { App as AntdApp } from "antd";  
  
const App = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Green}>  
 <AntdApp>  
 <Refine notificationProvider={useNotificationProvider}>  
 {/* ... */}  
 </Refine>  
 </AntdApp>  
 </ConfigProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { useNotificationProvider, RefineThemes } from "@refinedev/antd";  
import { App as AntdApp } from "antd";  
  
const App = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Green}>  
 <AntdApp>  
 <Refine notificationProvider={useNotificationProvider}>  
 {/* ... */}  
 </Refine>  
 </AntdApp>  
 </ConfigProvider>  
 );  
};

In this example, the useNotificationProvider hook from the @refinedev/antd package is used in the notificationProvider prop of the Refine component. This allows the notifications to consume the current theme context. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/introduction#notifications). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below

optimistic-gold•5mo ago

@kapa.ai I passed the useNotificationProvider to the Refine notificationProvider, but I'm still getting the same rror

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message you're seeing suggests that the notificationProvider is not able to consume the current theme context. This is because the notificationProvider export has been deprecated. To solve this issue, you should import the App component from antd and the useNotificationProvider export from @refinedev/antd. Then, pass useNotificationProvider as the notificationProvider prop in the Refine component. Here's an example of how you can do it:

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";  
import { ConfigProvider, App as AntdApp } from "antd";  
  
const API_URL = "<https://api.fake-rest.refine.dev";>  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <AntdApp>  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </AntdApp>  
 </ConfigProvider>  
 );  
};

import { Refine } from "@refinedev/core";  
import { ThemedLayoutV2, useNotificationProvider } from "@refinedev/antd";  
import { ConfigProvider, App as AntdApp } from "antd";  
  
const API_URL = "<https://api.fake-rest.refine.dev";>  
  
const App: React.FC = () => {  
 return (  
 <ConfigProvider theme={RefineThemes.Blue}>  
 <AntdApp>  
 <Refine  
 //...  
 notificationProvider={useNotificationProvider}  
 >  
 <ThemedLayoutV2>{/* ... */}</ThemedLayoutV2>  
 </Refine>  
 </AntdApp>  
 </ConfigProvider>  
 );  
};

In this example, the useNotificationProvider hook from the @refinedev/antd package is used in the notificationProvider prop of the Refine component. This allows the notifications to consume the current theme context. For more information, you can refer to the Refine documentation (https://refine.dev/docs/ui-integrations/ant-design/theming#usenotificationprovider-compatible-with-theme). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@110864105035808768> kapa.ai is still learning and improving, please let us know how it did by reacting below