Error with custom Notification and its props

[schirrel]

What you were expecting: I need to create a custom notification, with our ui and behavior. I am follow the Doc and create a custom component :

import { Notification, NotificationProps } from 'react-admin'
const Snackbar = (props: NotificationProps) => (
  <Notification {...props} autoHideDuration={5000} />
)
export default Snackbar

as can be seen, exactly the same as doc, copy and paste, and imported it at my custom layout and use as follow:

<Layout menu={Menu}  {...props}  appBar={CustomAppBar}  notification={Snackbar}  title='React Admin'>
   {children}
</Layout>

My expectation was it to work properly. What happened instead: Instead i have a TS error:

that also causes a build error:

Steps to reproduce:

• create a new project with 3.19
• follow the docs for custom notification

Related code:

import { Notification, NotificationProps } from 'react-admin'
const Snackbar = (props: NotificationProps) => (
  <Notification {...props} autoHideDuration={5000} />
)
export default Snackbar

as can be seen, exactly the same as doc, copy and paste, and imported it at my custom layout and use as follow:

<Layout menu={Menu}  {...props}  appBar={CustomAppBar}  notification={Snackbar}  title='React Admin'>
   {children}
</Layout>

Other information:

Environment

• React-admin version: 3.19
• Last version that did not exhibit the issue (if applicable):
• React version: 17.02
• Browser:
• Stack trace (in case of a JS error):

Type error: Type '(props: NotificationProps) => JSX.Element' is not assignable to type 'ComponentType<{}> | undefined'.
  Type '(props: NotificationProps) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{ children?: ReactNode; }' is not assignable to type 'NotificationProps'.
        Types of property 'children' are incompatible.
          Type 'ReactNode' is not assignable to type 'ReactElement<any, any> | undefined'.
            Type 'null' is not assignable to type 'ReactElement<any, any> | undefined'.

  14 |       {...props}
  15 |       appBar={CustomAppBar}
> 16 |       notification={Snackbar}
     |       ^
  17 |       title='React Admin'
  18 |     >
  19 |       {children}

[fzaninotto]

This is likely a problem on your side: TypeScript complains that the value of the notification prop is null. You probably haven't imported the component correctly.

If you think this is a react-admin bug, please provide a reproduction based on the simple example CodeSandbox:

https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple

[fzaninotto]

No news for some time, closing.