npm 包不工作 - Snackbar 不是一个函数

Question

我制作了一个简单的 npm 包 snackbar-notification-js，它是一个显示 snackbar 的函数（在 React 应用程序中）。 index.js我的包裹如下

function SnackBar(text, duration) {
  var div = document.getElementById('snackbar-js')
  if (!div) {
      div = document.createElement("div")
      div.id = 'snackbar-js'
      div.innerHTML = text;
      div.style.height = "30px"
      div.style.width = "fit-content"
      div.style.margin = "10px"
      div.style.padding = "10px"
      div.style.position = "fixed"
      div.style.bottom = "20px"
      div.style.left = "20px"
      div.style.backgroundColor = "rgb(63, 63, 63)"
      div.style.borderRadius = "5px"
      div.style.color = "white"
      div.style.display = "flex"
      div.style.justifyContent = "center"
      div.style.alignItems = "center"
      div.style.flexDirection = 'column'
      div.style.boxShadow = "black 1px 1px 1px"
      div.style.minWidth = "100px"
      div.style.fontFamily = "'Noto Sans', sans-serif"
      document.body.innerHTML += `<style> @keyframes show{ 0%{bottom: -100px;visibility: hidden;} 100%{bottom: 20px;visibility: visible;} } @keyframes hide{ 0%{bottom: 20px;visibility: visible;} 100%{bottom: -100px;visibility: hidden;} } @keyframes snackbar-loader{ 0%{width:100%;} 100%{width:0%;} } #snackbar-js::after{ content: ''; width: 100%; height: 4px;position:absolute;bottom:0px;left:1px;border-radius:5px;background-color: red; animation: snackbar-loader ${duration/1000}s forwards linear; } </style>`
      div.style.animation = "show 0.5s ease-out forwards"
      setTimeout(() => {
          div.style.animation = "hide 0.5s ease-out forwards"
          setTimeout(()=>{div.remove()},500)
      }, duration);
      document.body.appendChild(div)
  }
  else {
      div.innerText = text;
  }
}

module.exports = SnackBar;

现在我正在使用此模块在我的 React 应用程序中显示 snackbar（通知），但它给出了 SnackBar 不是函数的错误。我的App.js如下 App.js

import './App.css';
const SnackBar = require('snackbar-notification-js')

function App() {
    function func(){
      SnackBar("shlok",2000)
    }
  return (
        <button onClick={()=>func()}>click me</button>
  );
}

export default App;

错误：

但是如果我直接使用它（没有反应应用程序）它工作正常 example
任何帮助表示赞赏。谢谢！

Answer 1

因为你的代码对我有用，我假设你没有正确安装你的包。尝试 npm uninstall snackbar-notification-js 然后使用 npm install snackbar-notification-js.

重新安装

npm 包不工作 - Snackbar 不是一个函数

npm package not working - Snackbar is not a function

javascript

module

node.js

npm

npm-publish