Notistack 不导出 enqueueSnackbar答案

【问题标题】：Notistack doen't export enqueueSnackbarNotistack 不导出 enqueueSnackbar
【发布时间】：2023-01-25 17:48:55
【问题描述】：

我尝试在我的项目中使用 Notistack，但我遇到了一个小问题。我安装了这个库，并尝试在基本版本中使用它：

import { SnackbarProvider, enqueueSnackbar } from 'notistack'

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

但它显示错误：

未捕获（承诺）语法错误：请求的模块“/node_modules/.vite/deps/notistack.js?t=1664307735906&v=92d18e2e”不提供名为“enqueueSnackbar”的导出在我从按钮中删除导入 enqueueSnackbar 和 onClick 后，应用程序运行但此功能当然不起作用。我尝试了其他选项：文档中的第二个代码，在这里我使用了 useSnackbar（我知道这段代码不同，但我只显示了这个产生错误的框架）：
const { enqueueSnackbar, closeSnackbar } = useSnackbar()
效果非常相似——enqueueSnackbar 是未定义的。我怎样才能使用这个库？我不知道这很重要，但我使用 Laravel + Breeze + @mui。

【问题讨论】：

标签： javascript reactjs notistack

【解决方案1】：

您需要将所有父组件包装到 SnackbarProvider 组件。

import { SnackbarProvider, enqueueSnackbar } from 'notistack'

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

【讨论】：