1

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 ?

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Dilshan
  • 2,797
  • 1
  • 8
  • 26

1 Answers1

0

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

Nicolas Menettrier
  • 1,647
  • 1
  • 13
  • 28
  • Thanks for the answer, the issue first appeared when I install my custom ui package which does not use MUI. When I uninstall the package, the main project start working again. – Dilshan Jul 11 '22 at 15:17
  • The custom package is uses React Native components, then I use `react-native-web` to use them on web. That part is okay. Its' working on development env. Issue happens when the `@types/react` inside `@types/react-native` is v18 no matter old version of `@types/react-native` i install. – Dilshan Jul 11 '22 at 15:19
  • The issue with MUI happens when I try to upgrade the react version of main project, so it matches with the version of `@types/react` (v18) inside `@types/react-native` in my common package. When I do this MUI start to throw same issues with its components. I'm using v5 Mui – Dilshan Jul 11 '22 at 15:21
  • Maybe you already tried it but I saw on this issue: https://github.com/iamhosseindhv/notistack/issues/485 that you can put ` "@types/react": "18.0.8", "@types/react-dom": "18.0.3"` to solve this issue – Nicolas Menettrier Jul 11 '22 at 15:25
  • I also saw that you need to put a special flag to install @mui since it's not working with react 18 for now, they are talking about it here : https://stackoverflow.com/questions/71713111/mui-installation-doesnt-work-with-react-18 – Nicolas Menettrier Jul 11 '22 at 15:26
  • I tried the `"resolution"` one already. didn't worked. I'll try the the other link you sent. Thanks for that :) – Dilshan Jul 11 '22 at 15:33