How to fix Sweetalert 2 NOT working in Google Chrome

I am trying to utilize SWEETALERT2 via php on my project but when i try to run my file in google chrome it doesn’t work. The buttons are clickable and it records the data but sweetalert doesn’t display anything just a clickable submit button.

Things that i want to achieve on this project is to use sweetalert display when i successfully record new user. When i need to update the record or to delete a file.

Submit button should not be clickable if input box has no value.

index.php

 <div class="modal-body">
<form action="add_main_users.php" id="form">
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Full Name:</label>
<input type="text" class="form-control" name="fname" required data-validation-required-message="This field is required">

</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Username:</label>
<input type="text" class="form-control" name="uname" required data-validation-required-message="This field is required">
</div>

div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Email:</label>
<input type="email" class="form-control" name="email" required data-validation-required-message="This field is required">
</div>

<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Default Password:</label>
<input type="text" class="form-control" name="dpass" required data-validation-required-message="This field is required">
</div>
                                                    
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Role:</label>
<select class="form-control custom-select" name="role" required data-validation-required-message="This field is required">

<option value="Administrator">Administrator</option>
<option value="Editor">Editor</option>
</select>
</div>
<div class="controls">
<label for="recipient-name" class="control-label" style="color: Grey">Branch Assigned:</label>
<select class="form-control custom-select" name="bassign" required data-validation-required-message="This field is required">
<option value="0">1Warehouse</option>
<option value="1">2Warehouse</option>
<option value="2">3Warehouse</option>
</select>
</div>
</div>

<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnSubmit">Submit</button>
</div>
</div>
</form>
</div>
</div>```

    
add_main_users.php 
<?php
    $request = $_REQUEST; 
    $fname = $request['fname'];
    $uname = $request['uname']; 
    $email = $request['email'];
    $dpass = $request['dpass'];

    $servername = "localhost"; 
    $username = "root"; 
    $password = ""; 
    $dbname = "dims";

    $mysqli = new mysqli($servername, $username, $password, $dbname);

    if ($mysqli->connect_errno) {
      echo "Failed to connect to MySQL: " . $mysqli->connect_error;
      exit();
    }

    $sql = "INSERT INTO users (u_name, u_username, u_email, u_password)
    VALUES ('".$fname."', '".$uname."', '".$email."', '".$dpass."')";

    if ($mysqli->query($sql)) {
      echo "New user has been created.";
    } else {
      return "Error: " . $sql . "<br>" . $mysqli->error;
    }

    $mysqli->close();
?>

js

function save() 
{
    $("#btnSubmit").on("click", function() {
        var $this           = $(this); //submit button selector using ID
        var $caption        = $this.html();// We store the html content of the submit button
        var form            = "#form"; //defined the #form ID
        var formData        = $(form).serializeArray(); //serialize the form into array
        var route           = $(form).attr('action'); //get the route using attribute action

        // Ajax config
        $.ajax({
            type: "POST", //we are using POST method to submit the data to the server side
            url: route, // get the route value
            data: formData, // our serialized array data for server side
            beforeSend: function () {//We add this before send to disable the button once we submit it so that we prevent the multiple click
                $this.attr('disabled', true).html("Processing...");
            },
            success: function (response) {//once the request successfully process to the server side it will return result here
                $this.attr('disabled', false).html($caption);

                // Reload lists of employees
                all();

                // We will display the result using alert
                Swal.fire({
                  icon: 'success',
                  title: 'Success.',
                  text: response
                });

                // Reset form
                resetForm(form);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // You can put something here if there is an error from submitted request
            }
        });
    });
}

function resetForm(selector) 
{
    $(selector)[0].reset();
}

$(document).ready(function() {

    
    // Submit form using AJAX To Save Data
    save();

});