Some components from 3rd party packages cannot use in React component tree

user_11306028 0
Viewed 71

I have a React project with version 17.0.2 and notistack@2.0.5. Now when I try to import the snackbar provider and try to use it as,

import { SnackbarProvider } from 'notistack';

return <SnackbarProvider maxSnack={3}>
  <AppRouter />
</SnackbarProvider>

its throw the following 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("/Users/madukadilshan/Desktop/projects/sma-web/node_modules/@sm/common-ui/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

Same issue happens with the import PerfectScrollbar from 'react-perfect-scrollbar';

package versions

  • react: 17.0.2
  • notistack: 2.0.5
  • react-perfect-scrollbar: ^1.5.8
  • react version in common package: 17.0.2

It worked perfectly till yesterday. Today I installed a custom component package I made. Initially I used React 18 in the common ui package. I though maybe the issue is because of that. Tried to downgrade the react version in the common package to v17 and re install the package again. ( Also tried removing node_modules completely and reinstall all ) but still the error remain.

Does anyone know how can I fix this issue ? Tried this as well but didn't worked.

UPDATE

After I changed the react v18 to v17 in my common package, now its shows a same error but with different 3rd party package that uses react in the common ui.

What I have tried so far,

Using any type ( Definitely not what i want to do )

import { SnackbarProvider } from 'notistack';
const SnackbarProviderX: any = SnackbarProvider;

return <SnackbarProviderX></SnackbarProviderX>

Upgrade react version in main project

upgrade the React v17 -> v18 in main project so that it matches with the react version in common package which is v18. Doing this fixed the issue but introduced the same error with @mui package. Its never ends fixing one introduce another one.

So, is there any proper way to ignore this issue ?

typescript reactjs
1 Answers

If you read carefully the npm package or git you can find this :

If you're using Material-UI version 4.x.x or lower, download a compatible version of notistack using:

npm install notistack@latest-mui-v4
yarn add notistack@latest-mui-v4

I got the same trouble earlier this month, I know the struggle

user_70086280
Related