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

[outragedhuman]

Same error with:

"react": "^17.0.2",
"@types/react": "^17.0.35",

Adding the suggested resolutions to package.json breaks my app in other ways and doesn't resolve the TS error.

FWIW this was never working for me, I just tried adding notistack to my app Today. I also just tried replicating in Codesandbox but it was struggling to find react-dom 17.0.2 so I didn't get anywhere.

If I manually patch /node_modules/notistack/dist/index.d.ts as described by @hangaoke1, it works. Is it possible to get a fix for that? Since I can't get a Codesandbox working I could provide you with a test branch from my app if that would help?

[bibixx]

I am currently facing the same issue using react 17.0.2. I have tried to reproduce it in CodeSandbox but the issue didn't appear there! From my small investigation it seems like the issue is yarn.
@iamhosseindhv I have created a reproduction repository bibixx/notistack-issue-485 that uses yarn (also there's a branch using npm where the whole thing seems to work just fine)

For the quick patch you can create a .d.ts file (like notistack.d.ts) and augment the module with:

import { SnackbarProvider as SnackbarProviderBase } from 'notistack';

declare module 'notistack' {
  export interface SnackbarProvider extends SnackbarProviderBase {
    render(): ReactNode;
  }
}

P.S. I believe CodeSandbox uses npm underneath so that's why we couldn't reproduce it there

[outragedhuman]

I can confirm my affected project uses yarn.

[dryhurst]

also using yarn. also react 17.0.2

i was able to fix the issue by making sure the following packages were aligned:

react, @types/react, and @types/react-dom

all set to version 17.0.2

i also created the file notistack.d.ts and put declare module 'notistack'; in the file.

and as if by magic, the issue resolved.

not sure if this is the preferred solution but it worked for me, for now.

[gjoseph]

also using yarn. also react 17.0.2

i was able to fix the issue by making sure the following packages were aligned:

react, @types/react, and @types/react-dom

all set to version 17.0.2

i also created the file notistack.d.ts and put declare module 'notistack'; in the file.

and as if by magic, the issue resolved.

not sure if this is the preferred solution but it worked for me, for now.

that does nothing but override the type declaration of notistack with an empty one.

The real fix is highlighted by @hangaoke1 above -- which is something you can do in your local notistack.d.ts too, but ideally it should be fixed upstream in this package

[Rich79923]

Any update for when this will be fixed?

[C0DESTR0NG]

Any update for when this will be fixed?

I also need a fix for this. Following!

[w90]

For Typescript and React users, a possible solution:

import providers, { Provide } from 'react-manage-providers'
import { SnackbarProvider } from 'notistack'
import { SNACKBAR_OPTIONS, QUERY_CLIENT_OPTIONS, QueryClientProvider } from '@company/utils-general'

providers.push(SnackbarProvider, SNACKBAR_OPTIONS)
providers.push(QueryClientProvider, QUERY_CLIENT_OPTIONS)

export const MasterProvider = Provide

export const App = () => (
  <MasterProvider>
    <CssBaseline />

    <BrowserRouter>
      <RootRouter />
    </BrowserRouter>
  </MasterProvider>
)

[kevo1ution]

I'm using:

    "react": "17.0.2",
    "react-dom": "17.0.2",

Downgrading to

    "@types/react": "^17.0.39",

and deleting my package-lock.json and node_modules folder fixed the problem for me

[iamhosseindhv]

The fix for this is published as v2.0.7. Sorry for the tardy fix. Appreciate if you could confirm the fix has resolved the issue.

[jordaaash]

Just updated to 2.0.7 and getting some new errors:

node_modules/.pnpm/notistack@2.0.7_o5fu5zzztezljyppmu7zljxb6q/node_modules/notistack/dist/index.d.ts:263:15 - error TS2304: Cannot find name 'ReactNode'.

263     render(): ReactNode;
                  ~~~~~~~~~

node_modules/.pnpm/notistack@2.0.7_o5fu5zzztezljyppmu7zljxb6q/node_modules/notistack/dist/index.d.ts:274:76 - error TS2724: 'global.JSX' has no exported member named 'element'. Did you mean 'Element'?

274 export declare const SnackbarContent: (props: SnackbarContentProps) => JSX.element

Resolved dependencies:

react        = 18.2.0
@types/react = 18.0.21

[jordaaash]

First error is because this line references a nonexistant import:

notistack/src/index.d.ts

Line 267 in 9ec749b

render(): ReactNode;

This should be React.ReactNode consistent with other references.

[jordaaash]

And the second type JSX.element should maybe be React.ReactElement?

[jordaaash]

PR to fix: #520

[iamhosseindhv]

The fix is published as v2.0.8.

[outragedhuman]

The fix is published as v2.0.8.

Should this fix resolve the issue for React 17, or just React 18?

I'm running 17.0.2 and still seeing this on Notistack 2.0.8:

"react": "^17.0.2",
"notistack": "^2.0.8",

 ERROR(TypeScript)  '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("/Users/nbowers/git/upnorthcoding/projectJovian/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
 FILE  /Users/nbowers/git/upnorthcoding/projectJovian/src/index.tsx:14:6

    12 |     <CssBaseline />
    13 |     {/* TODO: Is it possible to lower this in the app's heirarchy? It could lead to less un-neccesary renders */}
  > 14 |     <SnackbarProvider maxSnack={MaximumSnackbarMessages}>
       |      ^^^^^^^^^^^^^^^^
    15 |       <App />
    16 |     </SnackbarProvider>
    17 |   </React.StrictMode>,

[TypeScript] Found 1 error. Watching for file changes.

[EvanVujcec]

The fix is published as v2.0.8.

Should this fix resolve the issue for React 17, or just React 18?

I'm running 17.0.2 and still seeing this on Notistack 2.0.8:

"react": "^17.0.2",
"notistack": "^2.0.8",

 ERROR(TypeScript)  '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("/Users/nbowers/git/upnorthcoding/projectJovian/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
 FILE  /Users/nbowers/git/upnorthcoding/projectJovian/src/index.tsx:14:6

    12 |     <CssBaseline />
    13 |     {/* TODO: Is it possible to lower this in the app's heirarchy? It could lead to less un-neccesary renders */}
  > 14 |     <SnackbarProvider maxSnack={MaximumSnackbarMessages}>
       |      ^^^^^^^^^^^^^^^^
    15 |       <App />
    16 |     </SnackbarProvider>
    17 |   </React.StrictMode>,

[TypeScript] Found 1 error. Watching for file changes.

I'm also having this issue on React 17.0.1 (environment on this project does not allow higher than 17.0.1)
Upgrading the types to 18 fixes the build error but still shows a type error in editor which can be suppressed 😐.

[kidqn]

The fix is published as v2.0.8.

Should this fix resolve the issue for React 17, or just React 18?
I'm running 17.0.2 and still seeing this on Notistack 2.0.8:

"react": "^17.0.2",
"notistack": "^2.0.8",

 ERROR(TypeScript)  '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("/Users/nbowers/git/upnorthcoding/projectJovian/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.
 FILE  /Users/nbowers/git/upnorthcoding/projectJovian/src/index.tsx:14:6

    12 |     <CssBaseline />
    13 |     {/* TODO: Is it possible to lower this in the app's heirarchy? It could lead to less un-neccesary renders */}
  > 14 |     <SnackbarProvider maxSnack={MaximumSnackbarMessages}>
       |      ^^^^^^^^^^^^^^^^
    15 |       <App />
    16 |     </SnackbarProvider>
    17 |   </React.StrictMode>,

[TypeScript] Found 1 error. Watching for file changes.

I'm also having this issue on React 17.0.1 (environment on this project does not allow higher than 17.0.1) Upgrading the types to 18 fixes the build error but still shows a type error in editor which can be suppressed 😐.

Please upgrade React to 17.0.2

add declare module 'notistack' to react-app-env.ts

package.json:

• "react": "^17.0.2",
• "notistack": "2.0.8",
• "react-dom": "^17.0.2"
• "@types/react": "^17.0.52"
• "@types/react-dom": "^17.0.18"

[garrett-wombat]

Im having the same issue after updating to react 18.2.0 and react-dom 18.2.0.

I had to just just ignore the ts error

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

Has anyone found a solution to this?

[chrishawn]

yeah this isnt fixed in React 17.02 and notistack 2.0.8 using yarn at least

[chrishawn]

so the solution seems to be update to latest notistack 2.0.8
then do

    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",

even if you leave these at 17

   "react": "^17.0.2",
   "react-dom": "^17.0.2",

[raimuhammad26]

so the solution seems to be update to latest notistack 2.0.8 then do

    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",

even if you leave these at 17

   "react": "^17.0.2",
   "react-dom": "^17.0.2",

Saved my life. Thank you.

[ninjarogue]

We're having the same issue here as well...

    "notistack": "3.0.1",

    "react": "18.2.0",
    "react-dom": "18.2.0",

    "@types/react": "18.2.6",
    "@types/react-dom": "18.2.4",
    
    "packageManager": "yarn@3.4.1"

Is there a fix for this yet?

[AlbinoGeek]

This still happens.

[aprilmintacpineda]

Just encountered this with:

"@types/react": "18.2.8",
"@types/react-dom": "18.2.4"

[AlbinoGeek]

In my case, it was fixed by deleting yarn.lock and doing yarn install again. Something got funky with the versions after a merge messed with the lockfile.

[nouman91]

I am getting this issue as well. I tried the @bibixx solution but unfortunately, it's not working for me.

[nouman91]

Any help would definitely be appreciated in this. My dependencies:

react: 17.0.2 react-redux: 17.0.2 noistack: 3.0.1

[ammoradi]

Same issue here:

"@types/react": "^18.2.12",
"@types/react-dom": "^18.2.5",

"notistack": "3.0.1",

Note: I'm using npm v9.8.0

[AdedigbaOluwad1]

I don't know what the maintainers are looking at. They should've merged this PR since. It's been 2 weeks now

…

On Mon, Sep 4, 2023, 7:30 AM Amir Mohammad Moradi ***@***.***> wrote: Same issue here: ***@***.***/react": "^18.2.12", ***@***.***/react-dom": "^18.2.5", "notistack": "3.0.1", — Reply to this email directly, view it on GitHub <#485 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3XNHCCVDO3L5A5H4UN7SNDXYVYRTANCNFSM5UPB6YGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[ammoradi]

I am currently facing the same issue using react 17.0.2. I have tried to reproduce it in CodeSandbox but the issue didn't appear there! From my small investigation it seems like the issue is yarn. @iamhosseindhv I have created a reproduction repository bibixx/notistack-issue-485 that uses yarn (also there's a branch using npm where the whole thing seems to work just fine)

For the quick patch you can create a .d.ts file (like notistack.d.ts) and augment the module with:

import { SnackbarProvider as SnackbarProviderBase } from 'notistack';

declare module 'notistack' {
  export interface SnackbarProvider extends SnackbarProviderBase {
    render(): ReactNode;
  }
}

P.S. I believe CodeSandbox uses npm underneath so that's why we couldn't reproduce it there

I could fix the issue for my case in a bit different way:

import { Component, ReactNode } from 'react';
import { SnackbarProviderProps } from 'notistack';

declare module 'notistack' {
  export interface SnackbarProvider extends Component<SnackbarProviderProps> {
    render(): ReactNode;
  }
}