Пакет npm не работает - Snackbar не является функцией

Я сделал простой пакет npm snackbar-notification-js, который представляет собой функцию, которая показывает закусочную (в приложении для реагирования). 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;

Теперь я использую этот модуль, чтобы показать закусочную (уведомление) в моем приложении для реагирования, но он выдает ошибку, что 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;

ошибка: Пакет npm не работает - Snackbar не является функцией

Однако он отлично работает, когда я использую его напрямую (без реагирующего приложения) пример
Любая помощь приветствуется. Спасибо!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
37
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Поскольку ваш код работает для меня, я предполагаю, что ваш пакет не установлен должным образом. Попробуйте npm uninstall snackbar-notification-js, а затем переустановите его с помощью npm install snackbar-notification-js.

Спасибо за ответ. Но я пробовал это до того, как это не сработало

Shlok Jain 02.04.2022 11:12

Хорошо, не могли бы вы показать мне вывод console.info(SnackBar)

Green_Lab 02.04.2022 11:23

его вывод "не определен"

Shlok Jain 02.04.2022 11:28

Я отредактировал свой ответ, надеюсь, что это поможет

Green_Lab 02.04.2022 11:46

Другие вопросы по теме