SweetAlert2: Unexpected type of html! Expected "string", got object

Question

I am trying to have a SweetAlert2 dialog showing two buttons, with the following code snippet:

swal('Some text', {
  buttons: {
    buttonA: {
      text: 'Some text',
      value: 'buttonA',
      className: 'some-class'
    },
    buttonB: {
      text: 'Some other text',
      value: 'buttonB',
      className: 'some-class'
    }
  },
  buttonsStyling: false
}).then((result) => {
  switch (result) {
    case 'buttonA':
      // Do something
      break;
    default:
      // Do something else
  }
})

But I get the following error message:

SweetAlert2: Unexpected type of html! Expected "string", got object

Also, the dialog only shows one "OK" button

What am I doing wrong ?

Answer 1

You've installed SweetAlert2 but using the API of SweetAlert. Those two are different plugins with different APIs nowadays.

Use SweetAlert2's API to get the desired result:

swal({
  title: 'Hello world!',
  confirmButtonText: 'Some text',
  cancelButtonText: 'Some other text',
  confirmButtonClass: 'some-class',
  cancelButtonClass: 'some-other-class',
  showCancelButton: true
}).then(function(result) {
  if (result.value) {
    console.log('button A pressed')
  } else {
    console.log('button B pressed')
  }
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@7"></script>