TS Error: SnackbarProvider cannot be used as a JSX component

[ryancrunchi]

Seems there is a conflict in types between @types versions used. I use "@types/react": "^18.0.8" and "@types/react-dom": "^18.0.0" while notistack and/or mui use "@types/react": "^16.8.6 || ^17.0.0" or "@types/react": "^16.9.23"

Expected Behavior

No compiler error

Current Behavior

Compiler error:

'SnackbarProvider' cannot be used as a JSX component.
  Its instance type 'SnackbarProvider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("node_modules/@mui/types/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
          Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props

Steps to Reproduce

Link:

Context

Your Environment

Tech	Version
Notistack	v2.0.4
React	^18.1.0
@types/react	^18.0.8
@types/react-dom	^18.0.0

[manfe]

Same here with react@17.0.2 and @types/react@17.0.44

[luisr-carrillo]

Same here with react@17.0.2 and @types/react@17.0.33. Hope the PR can fix it. 🙏

[NHarviel]

I was getting this same compile error I updated my @types/react to 18.0.8 and I am no longer getting the compilation error.

[ryancrunchi]

I solved by setting in package.json

  "resolutions": {
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3"
  }

[luisr-carrillo]

I solved by setting in package.json

  "resolutions": {
    "@types/react": "18.0.8",
    "@types/react-dom": "18.0.3"
  }

It works with that config. Thank you! 🙏

[iamhosseindhv]

Thanks for reporting and I'm glad there's some solution for this. I've been unable to reproduce, so if you could provide one, I'll reopen this issue.

[iamhosseindhv]

As mentioned above, I'd need a reproduction sandbox to investigate this

[hangaoke1]

/node_modules/notistack/dist/index.d.ts

export class SnackbarProvider extends React.Component<SnackbarProviderProps> {
    enqueueSnackbar: ProviderContext['enqueueSnackbar'];

    closeSnackbar: ProviderContext['closeSnackbar'];
}

there is no render function in declaration file

export class SnackbarProvider extends React.Component<SnackbarProviderProps> {
    enqueueSnackbar: ProviderContext['enqueueSnackbar'];

    closeSnackbar: ProviderContext['closeSnackbar'];

    render(): ReactNode;
}

fix the problem

the reason is when you extends React.Compoent there is no render function declaration

[LorhanSohaky]

Same error