Get non-app pages loading properly via vite

resources/js/app-tw.js

@@ -4,4 +4,4 @@
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-require('./bootstrap-tw');
+import './bootstrap-tw';

resources/js/bootstrap-tw.js

@@ -1,4 +1,5 @@
-window._ = require('lodash');
+import _ from 'lodash';
+window._ = _;
 
 import Alpine from 'alpinejs'
 window.Alpine = Alpine
@@ -10,7 +11,8 @@ Alpine.start()
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 window.axios.defaults.withCredentials = true;
@@ -43,13 +45,17 @@ if (token) {
  * API, allowing confirmations and very much more. (sweetalert.js.org)
  */
 
-window.swal = require('sweetalert2')
+import swal from 'sweetalert2';
+window.swal = swal;
+
 
 /**
  * Sanitize HTML inputs browser-side using sanitize-html!
  */
 
-window.sanitizeHtml = require('sanitize-html');
+import sanitizeHtml from 'sanitize-html';
+window.sanitizeHtml = sanitizeHtml;
+
 
 
 /**

resources/views/templates/_head_content_tw.blade.php

@@ -46,7 +46,7 @@
         <script>window.bugsnagClient = bugsnag('98440cbeef759631f3d987ab45b26a79')</script>
     @endif
 
-    <script src="{{ mix('/js/app-tw.js') }}" defer></script>
+    @vite('resources/js/app-tw.js')
     @feature('stripe')
         <script src="https://js.stripe.com/v3/"></script>
     @endfeature
@@ -77,7 +77,7 @@ function deviceType() {
 
     </script>
 
-    <link rel="stylesheet" href="{{ mix('css/app-tw.css') }}">
+    @vite('resources/sass/app-tw.css')
 
     @stack('head')
 </head>

tailwind.config.js

@@ -1,4 +1,4 @@
-const colors = require('tailwindcss/colors')
+import colors from 'tailwindcss/colors';
 
 module.exports = {
     darkMode: 'class',