TS Error: SnackbarProvider cannot be used as a JSX component #485

ryancrunchi · 2022-04-27T13:01:27Z

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

The text was updated successfully, but these errors were encountered:

manfe · 2022-04-29T13:37:22Z

Same here with [email protected] and @types/[email protected]

luisr-carrillo · 2022-05-06T15:28:46Z

Same here with [email protected] and @types/[email protected]. Hope the PR can fix it. 🙏

NHarviel · 2022-05-06T15:38:18Z

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 · 2022-05-06T15:49:47Z

I solved by setting in package.json

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

luisr-carrillo · 2022-05-06T19:12:51Z

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 · 2022-05-11T23:49:46Z

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 · 2022-05-16T22:48:32Z

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

hangaoke1 · 2022-05-17T11:57:43Z

/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 · 2022-05-18T12:44:00Z

Same error

outragedhuman · 2022-05-25T20:49:27Z

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 · 2022-06-01T21:55:43Z

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 · 2022-06-01T22:15:14Z

I can confirm my affected project uses yarn.

dryhurst · 2022-07-05T13:22:55Z

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 · 2022-07-20T10:48:12Z

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

…ck#485 gets fixed

Rich79923 · 2022-08-01T11:02:20Z

Any update for when this will be fixed?

C0DESTR0NG · 2022-08-08T22:25:11Z

Any update for when this will be fixed?

I also need a fix for this. Following!

w90 · 2022-08-25T13:48:16Z

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 · 2022-10-05T18:01:48Z

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 · 2022-10-15T16:05:36Z

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 · 2022-10-15T22:09:19Z

Just updated to 2.0.7 and getting some new errors:

node_modules/.pnpm/[email protected]_o5fu5zzztezljyppmu7zljxb6q/node_modules/notistack/dist/index.d.ts:263:15 - error TS2304: Cannot find name 'ReactNode'.

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

node_modules/.pnpm/[email protected]_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 · 2022-10-15T22:12:26Z

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 · 2022-10-15T22:13:23Z

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

jordaaash · 2022-10-15T22:16:23Z

PR to fix: #520

iamhosseindhv · 2022-10-16T14:00:35Z

The fix is published as v2.0.8.

outragedhuman · 2022-10-17T19:12:21Z

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 · 2022-11-03T16:47:37Z

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 · 2022-11-04T04:51:33Z

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 · 2022-11-18T05:45:00Z

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 · 2022-12-03T22:04:06Z

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

chrishawn · 2022-12-04T03:39:26Z

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 · 2023-03-12T23:07:55Z

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 · 2023-05-22T09:59:44Z

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": "[email protected]"

Is there a fix for this yet?

AlbinoGeek · 2023-05-25T18:33:02Z

This still happens.

aprilmintacpineda · 2023-06-05T08:12:21Z

Just encountered this with:

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

AlbinoGeek · 2023-06-05T10:14:17Z

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 · 2023-07-14T17:26:52Z

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

nouman91 · 2023-07-14T20:07:27Z

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

react: 17.0.2 react-redux: 17.0.2 noistack: 3.0.1

ammoradi · 2023-09-04T06:30:34Z

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 · 2023-09-04T06:32:39Z

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 · 2023-09-04T08:19:55Z

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;
  }
}

german-bortoli mentioned this issue May 4, 2022

Fix for SnackBarProvider cannot be used as JSX Element #486

Closed

iamhosseindhv closed this as completed May 11, 2022

iamhosseindhv reopened this May 16, 2022

iamhosseindhv changed the title ~~Typescript @types/react 18 - 'SnackbarProvider' cannot be used as a JSX component~~ TS Error: SnackbarProvider cannot be used as a JSX component May 16, 2022

samoyi mentioned this issue May 18, 2022

TS+React中，出现错误：SnackbarProvider cannot be used as a JSX component samoyi/learnNodejs#17

Open

outragedhuman mentioned this issue May 25, 2022

Notistack TS error Up-North-Coding/jovian#27

Open

gjoseph added a commit to gjoseph/Tichu that referenced this issue Jul 21, 2022

Add local type declarations for notistack until iamhosseindhv/notista…

20a8e1f

…ck#485 gets fixed

vwalsh mentioned this issue Sep 5, 2022

React 17 Error #512

Closed

iamhosseindhv mentioned this issue Oct 15, 2022

Fix TypeScript cannot be used as a JSX constructor #519

Merged

iamhosseindhv closed this as completed in #519 Oct 15, 2022

outragedhuman mentioned this issue Oct 17, 2022

Fix Notistack Error Up-North-Coding/jovian#134

Closed

Yard-Daniel mentioned this issue Jan 27, 2023

🌈 Track progress of notistack v3 #421

Closed

10 tasks

TS Error: SnackbarProvider cannot be used as a JSX component #485

TS Error: SnackbarProvider cannot be used as a JSX component #485

Comments

ryancrunchi commented Apr 27, 2022

Expected Behavior

Current Behavior

Steps to Reproduce

Context

Your Environment

manfe commented Apr 29, 2022

luisr-carrillo commented May 6, 2022

NHarviel commented May 6, 2022

ryancrunchi commented May 6, 2022

luisr-carrillo commented May 6, 2022

iamhosseindhv commented May 11, 2022

iamhosseindhv commented May 16, 2022

hangaoke1 commented May 17, 2022

LorhanSohaky commented May 18, 2022

outragedhuman commented May 25, 2022

bibixx commented Jun 1, 2022 • edited Loading

outragedhuman commented Jun 1, 2022

dryhurst commented Jul 5, 2022

gjoseph commented Jul 20, 2022

Rich79923 commented Aug 1, 2022

C0DESTR0NG commented Aug 8, 2022

w90 commented Aug 25, 2022 • edited Loading

kevo1ution commented Oct 5, 2022 • edited Loading

iamhosseindhv commented Oct 15, 2022

jordaaash commented Oct 15, 2022

jordaaash commented Oct 15, 2022

jordaaash commented Oct 15, 2022

jordaaash commented Oct 15, 2022

iamhosseindhv commented Oct 16, 2022

outragedhuman commented Oct 17, 2022

EvanVujcec commented Nov 3, 2022

kidqn commented Nov 4, 2022

garrett-wombat commented Nov 18, 2022

chrishawn commented Dec 3, 2022

chrishawn commented Dec 4, 2022

raimuhammad26 commented Mar 12, 2023

ninjarogue commented May 22, 2023 • edited Loading

AlbinoGeek commented May 25, 2023

aprilmintacpineda commented Jun 5, 2023

AlbinoGeek commented Jun 5, 2023

nouman91 commented Jul 14, 2023

nouman91 commented Jul 14, 2023

ammoradi commented Sep 4, 2023 • edited Loading

AdedigbaOluwad1 commented Sep 4, 2023 via email

ammoradi commented Sep 4, 2023

bibixx commented Jun 1, 2022 •

edited

Loading

w90 commented Aug 25, 2022 •

edited

Loading

kevo1ution commented Oct 5, 2022 •

edited

Loading

ninjarogue commented May 22, 2023 •

edited

Loading

ammoradi commented Sep 4, 2023 •

edited

Loading