Can't get my simple, external, JQuery functions to execute in Laravel. Help needed

I have setup a Laravel10.45 project to work with Vite, Bootstrap, Jquery and my files' path and structure is:

My files are as follows: /resources/css/app.css

@import 'datatables.net-dt'; 

/resources/js/app.js

import '../css/profileForm.css';
import '../css/app.css';
import './superAdminDashboard.js';
.
.
.

/resources/js/bootstrap.js

import 'bootstrap';
import $ from 'jquery';
window.$ = $;
import dt from 'datatables.net';
dt();	
	.
	.
	. 

resources/js/superAdminDashboard.js

export function superAdminDashboard() {
$('body').html('<h1>Hello World!</h1>');
// $( '#superAdminDashboard' ).DataTable();
} 

resources/view/layouts/app.blade.php has the vite directive set as:

@vite(['resources/sass/app.scss', 'resources/js/app.js']);

I have also tried changing it like:

@vite(['resources/sass/app.scss', 'resources/js/app.js', 'resources/js/formShiftUp.js', 'resources/js/superAdminDashboard.js'])

However, the file superAdminDashboard.js fails to execute. If however, I just place the following code inside tags, just above the vite directive, in the resources/View/layouts/app.blade.php file, it works!

<script type="module">
$('body').html('<h1>Hello JQuery, I love you!</h1>');
// $( '#superAdminDashboard' ).DataTable(); // This is what I would like to do eventually. I am just trying to get it working.
</script>

So what and where are the errors in my files that are preventing successful execution. Thanks.