how to use with vite in laravel 9?

[bhojkamal]

How to Import on this on vite and laravel 9?

on /resources/js/bootstrap.js, I've used as

import "js-share;"

on view file I included the following code in the script.

var shareItems = document.querySelectorAll('.social_share');
for (var i = 0; i < shareItems.length; i += 1) {
    shareItems[i].addEventListener('click', function share(e) {
        return JSShare.go(this);
    });
}

I got errors like this on the console when I click the soical icon - twitter or any

Uncaught ReferenceError: JSShare is not defined
    at HTMLButtonElement.share ((index):956:9)
share @ (index):956

Even I changed on bootstrap.js to this

import * as JSShare from "js-share";
window.JSShare = JSShare;

is not working; same error on console.
So the actual error is JSShare is not defined when click on button.

What is the issue here, can you please figure it out?

Thanks in advance

[delfimov]

I don't know your environment and the way your scripts are bundling. But my guess that you the imported dependencies are being loaded after your code. The solution is something like this:

document.addEventListener("DOMContentLoaded", () => {
    var shareItems = document.querySelectorAll('.social_share');
    for (var i = 0; i < shareItems.length; i += 1) {
        shareItems[i].addEventListener('click', function share(e) {
            return JSShare.go(this);
        });
    }
});