I've come across a common issue where none of the solutions seem to work for me. Currently, I am working with Laravel 10 and Vite, and have successfully installed Bootstrap using NPM. Although the configuration was correct for using Bootstrap CSS and icons, I'm unable to load the Bootstrap JavaScript file. This is necessary for functionalities like modals, toasts, and pop-ups.
Here is my vite.config.js:
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
resolve: {
alias: {
'~bootstrap': path.resolve(__dirname, "node_modules/bootstrap"),
'~bootstrap-icons': path.resolve(__dirname, "node_modules/bootstrap-icons/font")
}
}
});
Within the resources/js/app.js file:
import * as bootstrap from 'bootstrap';
I have also imported files in the main blade.php layout (where all other pages extend):
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
...
However, the error occurs on the blade.php page where Bootstrap is not defined:
...
<script>
window.onload = () => {
const toastLiveExample = document.querySelector("#liveToast")
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
}
</script>
...