Notistack doen't export enqueueSnackbar

Question

I try use Notistack in my project but I have a little problem. I installed tthis library and I try use that in the basic version:

import { SnackbarProvider, enqueueSnackbar } from 'notistack'

const App = () => {
  return (
    <div>
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
    </div>
  )
}

But it display error:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.vite/deps/notistack.js?t=1664307735906&v=92d18e2e' does not provide an export named 'enqueueSnackbar' After I remove importing enqueueSnackbar and onClick from button, app runing but this feature doesn't work, of course. I tryed other option: second code from docs and here I used useSnackbar (I know this code is different but I show only this frament which generate the error):

const { enqueueSnackbar, closeSnackbar } = useSnackbar()

Effect is very similar - enqueueSnackbar is undefined. How can I use this library? I don't know that this is important but I use Laravel + Breeze + @mui.

score 0 · Answer 1 · answered Jan 25 '23 at 09:48

You need to wrap all parent component to SnackbarProvider component.

import { SnackbarProvider, enqueueSnackbar } from 'notistack'

const App = () => {
  return (
    <SnackbarProvider>
      <div>
        <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
      </div>
     </SnackbarProvider>
  )
}

Notistack doen't export enqueueSnackbar

1 Answers1