diff --git a/assets/js/app.js b/assets/js/app.js
index 4dd39581..355fe919 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -30,21 +30,21 @@ import '../css/app/images.css';
 // start the Stimulus application
 import '../stimulus_bootstrap';
 
-// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
-const $ = require('jquery');
+import $ from 'jquery';
 
 //Only include javascript
 import '@fortawesome/fontawesome-free/css/all.css'
 
-require('bootstrap');
+import 'bootstrap';
 
 import "./error_handler";
 import "./tab_remember";
 import "./register_events";
 import "./tristate_checkboxes";
 
-//Define jquery globally
-global.$ = global.jQuery = require("jquery");
+// Expose jQuery globally so legacy plugins and Bootstrap's jQuery integration
+// can find it on window at runtime.
+global.$ = global.jQuery = $;
 
 //Use the local WASM file for the ZXing library
 import {
diff --git a/package.json b/package.json
index 04c21aea..4e2caba9 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
         "bootstrap": "^5.1.3",
         "core-js": "^3.38.0",
         "intl-messageformat": "^10.5.11",
-        "jquery": "^3.5.1",
+        "jquery": "^4.0.0",
         "popper.js": "^1.14.7",
         "regenerator-runtime": "^0.14.1",
         "webpack": "^5.74.0",
@@ -76,6 +76,6 @@
         "typescript": "^6.0.2"
     },
     "resolutions": {
-        "jquery": "^3.5.1"
+        "jquery": "^4.0.0"
     }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 60ea145f..469e20fc 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -119,7 +119,14 @@ Encore
     // requires WebpackEncoreBundle 1.4 or higher
     .enableIntegrityHashes(Encore.isProduction())
 
-    // uncomment if you're having problems with a jQuery plugin
+    // Force all jquery imports to the UMD build so webpack always receives the
+    // jQuery function directly instead of an ESM namespace object. Without this,
+    // webpack's ESM interop wraps jquery.module.js in a namespace
+    // { default, jQuery, $ } which has no .fn, crashing Bootstrap's
+    // defineJQueryPlugin when it tries to access $.fn.alert.
+    .addAliases({
+        'jquery': path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js')
+    })
     .autoProvidejQuery()
 
 
diff --git a/yarn.lock b/yarn.lock
index 3f8d2696..fbe0223c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3451,10 +3451,10 @@ jest-worker@^30.0.5:
     merge-stream "^2.0.0"
     supports-color "^8.1.1"
 
-jquery@>=1.7, jquery@^3.5.1:
-  version "3.7.1"
-  resolved "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz"
-  integrity sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==
+jquery@>=1.7, jquery@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-4.0.0.tgz#95c33ac29005ff72ec444c5ba1cf457e61404fbb"
+  integrity sha512-TXCHVR3Lb6TZdtw1l3RTLf8RBWVGexdxL6AC8/e0xZKEpBflBsjh9/8LXw+dkNFuOyW9B7iB3O1sP7hS0Kiacg==
 
 js-md5@^0.8.3:
   version "0.8.3"