Cannot read properties of undefined (reading 'removeLoadingState')

[cyberneticspk]

I am trying to submit a form from a modal and the form is submitted through ajax. once the form is submitted some response is returned that regenerate the choices with the new values.

Laravel Blade Template Initial Render (Works Fine):

{{ Form::select('member_id',$members, null, ['class' => 'form-control choices','searchEnabled'=>'true', 'placeholder' => __('Select a Member')]) }}

Js Code to Target The Choices Instance:

    $("#createFemberForm").submit(function(event) {
        event.preventDefault();
        var formData = new FormData(this);;
        console.log(formData)
        $.ajax({
           method: "POST",
           url: '{{ route('members.ajax.store') }}',
           data: formData,
           dataType: "json",
           contentType: false,
           processData: false,
           success: function(response) {
              const choicesInstance = new Choices(document.getElementById('member_id'));
              var newChoices = [];
              for (var memberId in response.members) {
                 if (response.members.hasOwnProperty(memberId)) {
                    newChoices.push({
                       value: memberId,
                       label: response.members[memberId]
                    });
                 }
              }
              choicesInstance.setChoices(newChoices, 'value', 'label', true);
              var selectedValue = response.member_id;
              choicesInstance.setValueByChoice(selectedValue);
              memberModal.style.display = 'none';
           }
        });
     });

Error: Cannot read properties of undefined (reading 'removeLoadingState')

Any help??

[Xon]

This happens when an new Choices instance is applied to an element which was previously had choices initialized on it. The previous Choices instance should be destroyed or reused, otherwise the new Choices instance will be in a broken state.

A better error message will be generated as part of v11.0.0