JSFiddle - React, Tailwind, and code Playground

HTML

<!-- load non minified for debugging purposes -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>

<div>
  <p>
    open problem, close problem, then open the problem dialog again quickly.
  </p>
  
  <p>
    as long as you do it quickly enough (before the animation would end, i guess?) it crashes
  </p>
</div>

<button id="aconfirm">
works fine
</button>

<button id="problem">
problem
</button>

JavaScript

// make them less in the way for this demo
alertify.defaults.notifier.position = "top-right";
alertify.defaults.notifier.delay = 0.5;

// comment out to prevent the dialog from crashing
alertify.defaults.transitionOff = true;

const aConfirmButton = document.querySelector('#aconfirm');
const problemButton = document.querySelector('#problem');

aConfirmButton.addEventListener('click', () => {
	alertify.confirm(
  	"Do you want to confirm?", "confirm?",
    function() { alertify.success("confirmed") },
    function() { alertify.error("nope") },
  );
});

alertify.dialog('aProblem', function() {
	return {
  	main: function() {},
  	setup: function() {
    	return {
      	buttons: [
        	{text: "save"},
          {text: "cancel"},
        ],
        options: {
        	title: "problem dialog",
          closable: false,
        },
      }
    },
  	callback: (closeEvent) => {
    	closeEvent.cancel = true;
    	if (closeEvent.button.text === "cancel") {
      	alertify.error("cancel")
      } else {
      	alertify.success("save")
      }
      alertify.aProblem().destroy();
    }
  }
});

problemButton.addEventListener('click', () => {
	alertify.aProblem({}).resizeTo(200, 150);
});