Refine•2y ago

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?

kapa.ai•3/22/24, 5:04 PM

Hi @Jaoc1811. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/22/24, 5:04 PM

----------------------
The error message you're seeing is suggesting that you use the

App

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 component with the

App

App

component from

antd

antd

. Here's an example of how you can do it:

In this example, the hook from the

@refinedev/antd

@refinedev/antd

package is used in the prop of the 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

----------------------

kapa.ai•3/22/24, 5:04 PM

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

hurt-tomatoOP•3/25/24, 1:32 PM

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

kapa.ai•3/25/24, 1:32 PM

Let me check the knowledge base for you. One moment!

kapa.ai•3/25/24, 1:32 PM

----------------------
The error message you're seeing suggests that the is not able to consume the current context. This is because the export has been deprecated.

To solve this issue, you should import the

App

App

component from

antd

antd

and the export from

@refinedev/antd

@refinedev/antd

. Then, pass as the prop in the component. Here's an example of how you can do it:

In this example, the hook from the

@refinedev/antd

@refinedev/antd

package is used in the prop of the 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

----------------------

kapa.ai•3/25/24, 1:32 PM

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