Merge pull request #17625 from MauricioFauth/js-module-import-jquery

Use JavaScript module to import jQuery

82 files changed, 178 insertions, 59 deletions

diff --git a/.eslintignore b/.eslintignore
index 76b13b8f64..8f67f071e4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,4 +2,4 @@ js/vendor/
 js/dist/
 tmp/
 vendor/
-webpack.config.js
+webpack.config.cjs
diff --git a/.eslintrc.json b/.eslintrc.json
index e5605ec45d..88b2bbe506 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -11,8 +11,7 @@
     },
     "env": {
         "browser": true,
-        "es6": true,
-        "jquery": true
+        "es6": true
     },
     "globals": {
         "Functions": "readonly"
diff --git a/jest.config.js b/jest.config.cjs
index 4aba52b4c5..f0289758dd 100644
--- a/jest.config.js
+++ b/jest.config.cjs
@@ -6,16 +6,13 @@ module.exports = {
     projects: [
         {
             verbose: true,
-            setupFiles: ['<rootDir>/test/jest/test-env.js'],
             coveragePathIgnorePatterns: [
                 '<rootDir>/node_modules/',
                 '<rootDir>/js/vendor/',
             ],
             displayName: 'phpMyAdmin',
             testMatch: ['<rootDir>/test/javascript/**/*.js'],
-            transform: {
-                '^.+\\.js$': '<rootDir>/test/jest/file-transformer.js'
-            },
+            transform: {},
             moduleNameMapper: {
                 '^phpmyadmin/(.*)$': '<rootDir>/js/src/$1',
                 '^@vendor/(.*)$': '<rootDir>/js/vendor/$1',
diff --git a/js/src/ajax.js b/js/src/ajax.js
index 2cca6db451..8b341408e4 100644
--- a/js/src/ajax.js
+++ b/js/src/ajax.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
@@ -196,7 +198,7 @@ window.AJAX = {
         }
         // Show lock icon if locked targets is not empty.
         // otherwise remove lock icon
-        if (!jQuery.isEmptyObject(window.AJAX.lockedTargets)) {
+        if (! $.isEmptyObject(window.AJAX.lockedTargets)) {
             $('#lock_page_icon').html(Functions.getImage('s_lock', window.Messages.strLockToolTip).toString());
         } else {
             $('#lock_page_icon').html('');
@@ -261,7 +263,7 @@ window.AJAX = {
         // the click event is not triggered by script
         if (typeof event !== 'undefined' && event.type === 'click' &&
             event.isTrigger !== true &&
-            !jQuery.isEmptyObject(window.AJAX.lockedTargets) &&
+            ! $.isEmptyObject(window.AJAX.lockedTargets) &&
             confirm(window.Messages.strConfirmNavigation) === false
         ) {
             return false;
diff --git a/js/src/chart.js b/js/src/chart.js
index ccf40dcd50..66c81598d2 100644
--- a/js/src/chart.js
+++ b/js/src/chart.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Chart type enumerations
  */
diff --git a/js/src/codemirror/addon/lint/sql-lint.js b/js/src/codemirror/addon/lint/sql-lint.js
index 9ac73840e9..7c506c240f 100644
--- a/js/src/codemirror/addon/lint/sql-lint.js
+++ b/js/src/codemirror/addon/lint/sql-lint.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.CodeMirror.sqlLint = function (text, updateLinting, options, cm) {
     // Skipping check if text box is empty.
     if (text.trim() === '') {
diff --git a/js/src/common.js b/js/src/common.js
index ca651f7b7a..a7ba0d748e 100644
--- a/js/src/common.js
+++ b/js/src/common.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/config.js b/js/src/config.js
index 0a028c08ce..f827ec8c64 100644
--- a/js/src/config.js
+++ b/js/src/config.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in configuration forms and on user preferences pages
  */
diff --git a/js/src/database/central_columns.js b/js/src/database/central_columns.js
index ae66057610..3d802632cf 100644
--- a/js/src/database/central_columns.js
+++ b/js/src/database/central_columns.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview   events handling from central columns page
  * @name            Central columns
diff --git a/js/src/database/events.js b/js/src/database/events.js
index 1cc2497d64..7a306a04e9 100644
--- a/js/src/database/events.js
+++ b/js/src/database/events.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/events.js', function () {
diff --git a/js/src/database/multi_table_query.js b/js/src/database/multi_table_query.js
index 1472aae45b..c387ca35da 100644
--- a/js/src/database/multi_table_query.js
+++ b/js/src/database/multi_table_query.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations
diff --git a/js/src/database/operations.js b/js/src/database/operations.js
index ea1d483290..704deeb310 100644
--- a/js/src/database/operations.js
+++ b/js/src/database/operations.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/database/qbe.js b/js/src/database/qbe.js
index 888096a21e..857fb6cbbb 100644
--- a/js/src/database/qbe.js
+++ b/js/src/database/qbe.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations
diff --git a/js/src/database/query_generator.js b/js/src/database/query_generator.js
index cb4fafe27e..74a9ba3665 100644
--- a/js/src/database/query_generator.js
+++ b/js/src/database/query_generator.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in QBE for DB
  * @name            Database Operations
diff --git a/js/src/database/routines.js b/js/src/database/routines.js
index d7b9804e44..4876909497 100644
--- a/js/src/database/routines.js
+++ b/js/src/database/routines.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/routines.js', function () {
diff --git a/js/src/database/search.js b/js/src/database/search.js
index ed85075317..f3488f4186 100644
--- a/js/src/database/search.js
+++ b/js/src/database/search.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JavaScript functions used on Database Search page
  *
diff --git a/js/src/database/structure.js b/js/src/database/structure.js
index 0687d209cf..bd0c5dfd84 100644
--- a/js/src/database/structure.js
+++ b/js/src/database/structure.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/database/tracking.js b/js/src/database/tracking.js
index c1154d3a3a..5edd0e1935 100644
--- a/js/src/database/tracking.js
+++ b/js/src/database/tracking.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down the page
  */
diff --git a/js/src/database/triggers.js b/js/src/database/triggers.js
index 5a1970f9c1..e229812cb8 100644
--- a/js/src/database/triggers.js
+++ b/js/src/database/triggers.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 window.AJAX.registerTeardown('database/triggers.js', function () {
diff --git a/js/src/datetimepicker.js b/js/src/datetimepicker.js
index f444f26878..8ed4a2bfaa 100644
--- a/js/src/datetimepicker.js
+++ b/js/src/datetimepicker.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 function registerDatePickerTranslations () {
     'use strict';
 
diff --git a/js/src/designer/history.js b/js/src/designer/history.js
index da40334c9d..05b474d4ab 100644
--- a/js/src/designer/history.js
+++ b/js/src/designer/history.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in this file builds history tab and generates query.
  *
diff --git a/js/src/designer/init.js b/js/src/designer/init.js
index 0703aa8cdc..c0fb710ecb 100644
--- a/js/src/designer/init.js
+++ b/js/src/designer/init.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Initializes the data required to run Designer, then fires it up.
  */
diff --git a/js/src/designer/move.js b/js/src/designer/move.js
index ceb60fa5bd..bdea535d6a 100644
--- a/js/src/designer/move.js
+++ b/js/src/designer/move.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @package PhpMyAdmin-Designer
  */
diff --git a/js/src/designer/page.js b/js/src/designer/page.js
index e24f752519..9807cba07a 100644
--- a/js/src/designer/page.js
+++ b/js/src/designer/page.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global DesignerOfflineDB */ // js/designer/database.js
 /* global DesignerMove */ // js/designer/move.js
 /* global DesignerObjects */ // js/designer/objects.js
diff --git a/js/src/drag_drop_import.js b/js/src/drag_drop_import.js
index f782c35193..de5f08e141 100644
--- a/js/src/drag_drop_import.js
+++ b/js/src/drag_drop_import.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 /* This script handles PMA Drag Drop Import, loaded only when configuration is enabled.*/
 
@@ -38,13 +39,13 @@ var DragDropImport = {
         var ext = arr[arr.length - 1];
 
         // check if compressed
-        if (jQuery.inArray(ext.toLowerCase(),
+        if ($.inArray(ext.toLowerCase(),
             DragDropImport.allowedCompressedExtensions) !== -1) {
             ext = arr[arr.length - 2];
         }
 
         // Now check for extension
-        if (jQuery.inArray(ext.toLowerCase(),
+        if ($.inArray(ext.toLowerCase(),
             DragDropImport.allowedExtensions) !== -1) {
             return ext;
         }
diff --git a/js/src/error_report.js b/js/src/error_report.js
index 8174862d72..91f950b640 100644
--- a/js/src/error_report.js
+++ b/js/src/error_report.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * general function, usually for data manipulation pages
  *
@@ -249,7 +251,7 @@ var ErrorReport = {
             newFunc.wrapped = true;
             // Set guid of wrapped function same as original function, so it can be removed
             // See bug#4146 (problem with jquery draggable and sortable)
-            newFunc.guid = func.guid = func.guid || newFunc.guid || jQuery.guid++;
+            newFunc.guid = func.guid = func.guid || newFunc.guid || $.guid++;
             return newFunc;
         } else {
             return func;
diff --git a/js/src/export.js b/js/src/export.js
index 85b2880561..99c5be72ae 100644
--- a/js/src/export.js
+++ b/js/src/export.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in the export tab
  *
diff --git a/js/src/export_output.js b/js/src/export_output.js
index 84d8431bbd..d717c28e2c 100644
--- a/js/src/export_output.js
+++ b/js/src/export_output.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.AJAX.registerOnload('export_output.js', function () {
     $(document).on('keydown', function (e) {
         if ((e.which || e.keyCode) === 116) {
diff --git a/js/src/functions.js b/js/src/functions.js
index 26105ad463..d0de8d4a6e 100644
--- a/js/src/functions.js
+++ b/js/src/functions.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 /* global ChartType, ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 /* global DatabaseStructure */ // js/database/structure.js
@@ -1704,7 +1706,7 @@ Functions.ajaxShowMessage = function (message = null, timeout = null, type = nul
  * @return {void}
  */
 Functions.ajaxRemoveMessage = function ($thisMessageBox) {
-    if ($thisMessageBox !== undefined && $thisMessageBox instanceof jQuery) {
+    if ($thisMessageBox !== undefined && $thisMessageBox instanceof $) {
         $thisMessageBox
             .stop(true, true)
             .fadeOut('medium');
@@ -2196,7 +2198,7 @@ Functions.confirm = function (question, url, callbackFn, openCallback) {
         openCallback();
     }
 };
-jQuery.fn.confirm = Functions.confirm;
+$.fn.confirm = Functions.confirm;
 
 /**
  * jQuery function to sort a table's body after a new row has been appended to it.
@@ -2239,7 +2241,7 @@ Functions.sortTable = function (textSelector) {
         });
     });
 };
-jQuery.fn.sortTable = Functions.sortTable;
+$.fn.sortTable = Functions.sortTable;
 
 /**
  * @return {void}
@@ -3287,7 +3289,7 @@ Functions.showIndexEditDialog = function ($outer) {
  **/
 Functions.showHints = function ($div) {
     var $newDiv = $div;
-    if ($newDiv === undefined || ! ($newDiv instanceof jQuery) || $newDiv.length === 0) {
+    if ($newDiv === undefined || ! ($newDiv instanceof $) || $newDiv.length === 0) {
         $newDiv = $('body');
     }
     $newDiv.find('.pma_hint').each(function () {
@@ -3549,7 +3551,7 @@ Functions.slidingMessage = function (msg, $object) {
         // Don't show an empty message
         return false;
     }
-    if ($obj === undefined || ! ($obj instanceof jQuery) || $obj.length === 0) {
+    if ($obj === undefined || ! ($obj instanceof $) || $obj.length === 0) {
         // If the second argument was not supplied,
         // we might have to create a new DOM node.
         if ($('#PMA_slidingMessage').length === 0) {
@@ -3688,7 +3690,7 @@ Functions.onloadLockPage = function () {
             return $(this).val() === value;
         });
     };
-}(jQuery));
+}($));
 
 /**
  * Return value of a cell in a table.
@@ -4358,7 +4360,7 @@ Functions.getPostData = function () {
     }
     return dataPost;
 };
-jQuery.fn.getPostData = Functions.getPostData;
+$.fn.getPostData = Functions.getPostData;
 
 /**
  * @return {function}
diff --git a/js/src/gis_data_editor.js b/js/src/gis_data_editor.js
index 6e11cbf8ec..26296d1f41 100644
--- a/js/src/gis_data_editor.js
+++ b/js/src/gis_data_editor.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used in GIS data editor
  *
diff --git a/js/src/home.js b/js/src/home.js
index c084afc949..08420da020 100644
--- a/js/src/home.js
+++ b/js/src/home.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 const GitInfo = {
     /**
      * Version string to integer conversion.
diff --git a/js/src/import.js b/js/src/import.js
index 0e89ca2135..bd1568cb9f 100644
--- a/js/src/import.js
+++ b/js/src/import.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in the import tab
  *
diff --git a/js/src/indexes.js b/js/src/indexes.js
index 183d8ec908..d902efa61a 100644
--- a/js/src/indexes.js
+++ b/js/src/indexes.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/jqplot/plugins/jqplot.byteFormatter.js b/js/src/jqplot/plugins/jqplot.byteFormatter.js
index 6196961ef2..13280c6712 100644
--- a/js/src/jqplot/plugins/jqplot.byteFormatter.js
+++ b/js/src/jqplot/plugins/jqplot.byteFormatter.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * jqplot formatter for byte values
  *
@@ -49,4 +51,4 @@
             }
         };
     };
-}(jQuery));
+}($));
diff --git a/js/src/jquery.sortable-table.js b/js/src/jquery.sortable-table.js
index 230565ed5e..ae3e5d1321 100644
--- a/js/src/jquery.sortable-table.js
+++ b/js/src/jquery.sortable-table.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * This file is internal to phpMyAdmin.
  * @license see the main phpMyAdmin license.
@@ -39,7 +41,7 @@
  * which is the actually draggable element.
  */
 (function ($) {
-    jQuery.fn.sortableTable = function (method) {
+    $.fn.sortableTable = function (method) {
         var methods = {
             init: function (options) {
                 var tb = new SortableTableInstance(this, options);
@@ -290,4 +292,4 @@
             }
         }
     };
-}(jQuery));
+}($));
diff --git a/js/src/keyhandler.js b/js/src/keyhandler.js
index 9ef70b065e..e531bcaae5 100644
--- a/js/src/keyhandler.js
+++ b/js/src/keyhandler.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 // var that holds: 0- if ctrl key is not pressed 1- if ctrl key is pressed
 let ctrlKeyHistory = 0;
diff --git a/js/src/main.js b/js/src/main.js
index db123c94ba..60b27be791 100644
--- a/js/src/main.js
+++ b/js/src/main.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Indexes */
 /* global Navigation */
 
diff --git a/js/src/makegrid.js b/js/src/makegrid.js
index ac04bd9eef..26a1c8c894 100644
--- a/js/src/makegrid.js
+++ b/js/src/makegrid.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Sql */
 /* global firstDayOfCalendar */ // templates/javascript/variables.twig
 
@@ -2318,4 +2320,4 @@ window.makeGrid = function (t, enableResize, enableReorder, enableVisib, enableG
             });
         }
     }; // end noSelect
-}(jQuery));
+}($));
diff --git a/js/src/menu_resizer.js b/js/src/menu_resizer.js
index 1708b74537..3b72096563 100644
--- a/js/src/menu_resizer.js
+++ b/js/src/menu_resizer.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Handles the resizing of a menu according to the available screen width
  *
@@ -184,4 +186,4 @@
             $.error('Method ' +  method + ' does not exist on jQuery.menuResizer');
         }
     };
-}(jQuery));
+}($));
diff --git a/js/src/multi_column_sort.js b/js/src/multi_column_sort.js
index c03bd46116..541d1f6a12 100644
--- a/js/src/multi_column_sort.js
+++ b/js/src/multi_column_sort.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Implements the shiftkey + click remove column
  *                  from order by clause functionality
diff --git a/js/src/name-conflict-fixes.js b/js/src/name-conflict-fixes.js
index f1a7853b8f..8202aba9c0 100644
--- a/js/src/name-conflict-fixes.js
+++ b/js/src/name-conflict-fixes.js
@@ -1 +1,3 @@
+import $ from 'jquery';
+
 $.widget.bridge('uiTooltip', $.ui.tooltip);
diff --git a/js/src/navigation.js b/js/src/navigation.js
index bc2355ee3d..a0fa2000fc 100644
--- a/js/src/navigation.js
+++ b/js/src/navigation.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * function used in or for navigation panel
  *
diff --git a/js/src/normalization.js b/js/src/normalization.js
index ee9eff3cfb..e77f0d03c3 100644
--- a/js/src/normalization.js
+++ b/js/src/normalization.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview   events handling from normalization page
  * @name            normalization
diff --git a/js/src/page_settings.js b/js/src/page_settings.js
index 0b6a0239b1..67758a9883 100644
--- a/js/src/page_settings.js
+++ b/js/src/page_settings.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used for page-related settings
  * @name            Page-related settings
diff --git a/js/src/replication.js b/js/src/replication.js
index e14b28e242..fad5c1adaf 100644
--- a/js/src/replication.js
+++ b/js/src/replication.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server replication page
  * @name            Server Replication
diff --git a/js/src/server/databases.js b/js/src/server/databases.js
index 7685988255..5d788ccc6c 100644
--- a/js/src/server/databases.js
+++ b/js/src/server/databases.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/server/plugins.js b/js/src/server/plugins.js
index 4d9df6583b..41a3e0bea2 100644
--- a/js/src/server/plugins.js
+++ b/js/src/server/plugins.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Make columns sortable, but only for tables with more than 1 data row.
  */
diff --git a/js/src/server/privileges.js b/js/src/server/privileges.js
index 2482e50e14..39d922eab6 100644
--- a/js/src/server/privileges.js
+++ b/js/src/server/privileges.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/server/status/monitor.js b/js/src/server/status/monitor.js
index 705d0d72a7..29a0e29a39 100644
--- a/js/src/server/status/monitor.js
+++ b/js/src/server/status/monitor.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server status monitor page
  * @name            Server Status Monitor
diff --git a/js/src/server/status/processes.js b/js/src/server/status/processes.js
index 339eb98e57..44b36aebd1 100644
--- a/js/src/server/status/processes.js
+++ b/js/src/server/status/processes.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Server Status Processes
  *
diff --git a/js/src/server/status/queries.js b/js/src/server/status/queries.js
index c8e4f1ea73..255e998aba 100644
--- a/js/src/server/status/queries.js
+++ b/js/src/server/status/queries.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server status query page
  * @name            Server Status Query
diff --git a/js/src/server/status/sorter.js b/js/src/server/status/sorter.js
index e521b0de74..9367e3c747 100644
--- a/js/src/server/status/sorter.js
+++ b/js/src/server/status/sorter.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 // TODO: tablesorter shouldn't sort already sorted columns
 // eslint-disable-next-line no-unused-vars
 function initTableSorter (tabid) {
@@ -28,7 +30,7 @@ $(function () {
             return (/^[0-9]?[0-9,\\.]*\s?(k|M|G|T|%)?$/).test(s);
         },
         format: function (s) {
-            var num = jQuery.tablesorter.formatFloat(
+            var num = $.tablesorter.formatFloat(
                 s.replace(window.Messages.strThousandsSeparator, '')
                     .replace(window.Messages.strDecimalSeparator, '.')
             );
diff --git a/js/src/server/status/variables.js b/js/src/server/status/variables.js
index 981f755324..95e36375a6 100644
--- a/js/src/server/status/variables.js
+++ b/js/src/server/status/variables.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  *
  *
diff --git a/js/src/server/user_groups.js b/js/src/server/user_groups.js
index 6810b730f9..4b6b09b195 100644
--- a/js/src/server/user_groups.js
+++ b/js/src/server/user_groups.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server user groups page
  * @name            Server User Groups
diff --git a/js/src/server/variables.js b/js/src/server/variables.js
index 40e98662f2..add0df6dd6 100644
--- a/js/src/server/variables.js
+++ b/js/src/server/variables.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Javascript functions used in server variables page
  * @name            Server Replication
diff --git a/js/src/setup/ajax.js b/js/src/setup/ajax.js
index c3293a8b3b..447d7c76b2 100644
--- a/js/src/setup/ajax.js
+++ b/js/src/setup/ajax.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* eslint-disable no-unused-vars */
 /**
  * Dummy implementation of the ajax page loader
diff --git a/js/src/setup/scripts.js b/js/src/setup/scripts.js
index 83de7b6a0d..fa1a58f94a 100644
--- a/js/src/setup/scripts.js
+++ b/js/src/setup/scripts.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Functions used in Setup configuration forms
  */
diff --git a/js/src/shortcuts_handler.js b/js/src/shortcuts_handler.js
index dfbea63fc2..0d2b8d1b79 100644
--- a/js/src/shortcuts_handler.js
+++ b/js/src/shortcuts_handler.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    Handle shortcuts in various pages
  * @name            Shortcuts handler
diff --git a/js/src/sql.js b/js/src/sql.js
index e5878dde23..aed0165529 100644
--- a/js/src/sql.js
+++ b/js/src/sql.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used wherever an sql query form is used
  *
diff --git a/js/src/table/change.js b/js/src/table/change.js
index 27fca891ca..2bb46e35ae 100644
--- a/js/src/table/change.js
+++ b/js/src/table/change.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    function used in table data manipulation pages
  *
@@ -175,7 +177,7 @@ function verifyAfterSearchFieldChange (index, searchFormId) {
             });
             // validator method for IN(...), NOT IN(...)
             // BETWEEN and NOT BETWEEN
-            jQuery.validator.addMethod('validationFunctionForMultipleInt', function (value) {
+            $.validator.addMethod('validationFunctionForMultipleInt', function (value) {
                 return value.match(/^(?:(?:\d\s*)|\s*)+(?:,\s*\d+)*$/i) !== null;
             },
             window.Messages.strEnterValidNumber
@@ -432,17 +434,17 @@ window.AJAX.registerOnload('table/change.js', function () {
     if ($('#insertForm').length) {
         // validate the comment form when it is submitted
         $('#insertForm').validate();
-        jQuery.validator.addMethod('validationFunctionForHex', function (value) {
+        $.validator.addMethod('validationFunctionForHex', function (value) {
             return value.match(/^[a-f0-9]*$/i) !== null;
         });
 
-        jQuery.validator.addMethod('validationFunctionForMd5', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForMd5', function (value, element, options) {
             return !(value.startsWith('MD5') &&
                 typeof options.data('maxlength') !== 'undefined' &&
                 options.data('maxlength') < 32);
         });
 
-        jQuery.validator.addMethod('validationFunctionForAesDesEncrypt', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForAesDesEncrypt', function (value, element, options) {
             var funType = value.substring(0, 3);
             if (funType !== 'AES' && funType !== 'DES') {
                 return false;
@@ -457,7 +459,7 @@ window.AJAX.registerOnload('table/change.js', function () {
             return false;
         });
 
-        jQuery.validator.addMethod('validationFunctionForDateTime', function (value, element, options) {
+        $.validator.addMethod('validationFunctionForDateTime', function (value, element, options) {
             var dtValue = value;
             var theType = options;
             if (theType === 'date') {
@@ -828,7 +830,7 @@ function addNewContinueInsertionFields (event) {
          * Displays alert if data loss possible on decrease
          * of rows.
          */
-        var checkLock = jQuery.isEmptyObject(window.AJAX.lockedTargets);
+        var checkLock = $.isEmptyObject(window.AJAX.lockedTargets);
         if (checkLock || confirm(window.Messages.strConfirmRowChange) === true) {
             while (currRows > targetRows) {
                 $('input[id^=insert_ignore]').last()
diff --git a/js/src/table/chart.js b/js/src/table/chart.js
index c66f6485a0..a4a14fab7c 100644
--- a/js/src/table/chart.js
+++ b/js/src/table/chart.js
@@ -1,3 +1,4 @@
+import $ from 'jquery';
 
 /* global ColumnType, DataTable, JQPlotChartFactory */ // js/chart.js
 
diff --git a/js/src/table/find_replace.js b/js/src/table/find_replace.js
index bdf62a7578..878b5426d9 100644
--- a/js/src/table/find_replace.js
+++ b/js/src/table/find_replace.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down a page
  */
diff --git a/js/src/table/gis_visualization.js b/js/src/table/gis_visualization.js
index 79b3b01da3..14016e4183 100644
--- a/js/src/table/gis_visualization.js
+++ b/js/src/table/gis_visualization.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used for visualizing GIS data
  *
diff --git a/js/src/table/operations.js b/js/src/table/operations.js
index f7ffd0d374..88805feb33 100644
--- a/js/src/table/operations.js
+++ b/js/src/table/operations.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /* global Navigation */
 
 /**
diff --git a/js/src/table/relation.js b/js/src/table/relation.js
index 2ed11b7175..d0f650b0ae 100644
--- a/js/src/table/relation.js
+++ b/js/src/table/relation.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * for table relation
  */
diff --git a/js/src/table/select.js b/js/src/table/select.js
index f50e2d39fe..26c262767b 100644
--- a/js/src/table/select.js
+++ b/js/src/table/select.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview JavaScript functions used on /table/search
  *
diff --git a/js/src/table/structure.js b/js/src/table/structure.js
index a1abff1a8a..013f0ea8e8 100644
--- a/js/src/table/structure.js
+++ b/js/src/table/structure.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * @fileoverview    functions used on the table structure page
  * @name            Table Structure
diff --git a/js/src/table/tracking.js b/js/src/table/tracking.js
index 11b5f1a9c2..074826c4d2 100644
--- a/js/src/table/tracking.js
+++ b/js/src/table/tracking.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Unbind all event handlers before tearing down the page
  */
diff --git a/js/src/table/zoom_plot_jqplot.js b/js/src/table/zoom_plot_jqplot.js
index 68be3c395b..1fbd0e125f 100644
--- a/js/src/table/zoom_plot_jqplot.js
+++ b/js/src/table/zoom_plot_jqplot.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 // TODO: change the axis
 /**
  * @fileoverview JavaScript functions used on /table/search
diff --git a/js/src/transformations/image_upload.js b/js/src/transformations/image_upload.js
index 6bbe535f8b..94455a995d 100644
--- a/js/src/transformations/image_upload.js
+++ b/js/src/transformations/image_upload.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * Image upload transformations plugin js
  *
diff --git a/js/src/transformations/json.js b/js/src/transformations/json.js
index bae59b028a..ced6251f74 100644
--- a/js/src/transformations/json.js
+++ b/js/src/transformations/json.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JSON syntax highlighting transformation plugin
  */
diff --git a/js/src/transformations/json_editor.js b/js/src/transformations/json_editor.js
index 9592f28e6c..36f2aa1570 100644
--- a/js/src/transformations/json_editor.js
+++ b/js/src/transformations/json_editor.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * JSON syntax highlighting transformation plugin
  *
diff --git a/js/src/transformations/sql_editor.js b/js/src/transformations/sql_editor.js
index 17d38e3e26..b639605474 100644
--- a/js/src/transformations/sql_editor.js
+++ b/js/src/transformations/sql_editor.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * SQL syntax highlighting transformation plugin js
  *
diff --git a/js/src/transformations/xml.js b/js/src/transformations/xml.js
index 1905684fd4..68a0fedadb 100644
--- a/js/src/transformations/xml.js
+++ b/js/src/transformations/xml.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * XML syntax highlighting transformation plugin
  */
diff --git a/js/src/transformations/xml_editor.js b/js/src/transformations/xml_editor.js
index a8e053fc35..9b76aef423 100644
--- a/js/src/transformations/xml_editor.js
+++ b/js/src/transformations/xml_editor.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 /**
  * XML editor plugin
  *
diff --git a/js/src/u2f.js b/js/src/u2f.js
index ef0bb803eb..f6f68dbbe0 100644
--- a/js/src/u2f.js
+++ b/js/src/u2f.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 window.AJAX.registerOnload('u2f.js', function () {
     var $inputReg = $('#u2f_registration_response');
     if ($inputReg.length > 0) {
diff --git a/js/src/validator-messages.js b/js/src/validator-messages.js
index cbb4d44163..bfe52962fb 100644
--- a/js/src/validator-messages.js
+++ b/js/src/validator-messages.js
@@ -1,3 +1,5 @@
+import $ from 'jquery';
+
 function extendingValidatorMessages () {
     $.extend($.validator.messages, {
         required: window.Messages.strValidatorRequired,
diff --git a/package.json b/package.json
index 1593d3bbc6..5fb7d3b13c 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "engines": {
     "node": ">=10"
   },
+  "type": "module",
   "dependencies": {
     "@babel/cli": "^7.17.10",
     "@babel/core": "^7.17.10",
@@ -68,7 +69,7 @@
     "postinstall": "yarn run build",
     "build": "webpack",
     "css-lint": "stylelint -s scss \"themes/**/scss/*.scss\" \"setup/scss/*.scss\"",
-    "js-lint": "eslint js/src test/javascript test/jest jest.config.js",
-    "test": "jest"
+    "js-lint": "eslint js/src test/javascript jest.config.cjs",
+    "test": "yarn node --experimental-vm-modules $(yarn bin jest)"
   }
 }
diff --git a/test/javascript/sql.test.js b/test/javascript/sql.test.js
index e2b333329d..0fb6b29654 100644
--- a/test/javascript/sql.test.js
+++ b/test/javascript/sql.test.js
@@ -1,6 +1,8 @@
 /* eslint-env node, jest */
+/* global Sql */
 
-const Sql = require('phpmyadmin/sql');
+import 'phpmyadmin/ajax';
+import 'phpmyadmin/sql';
 
 describe('SQL', () => {
     test('test URL encode', () => {
diff --git a/test/jest/file-transformer.js b/test/jest/file-transformer.js
deleted file mode 100644
index 81ea49b9a1..0000000000
--- a/test/jest/file-transformer.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-env node */
-
-module.exports = {
-    process (sourceContents, filename) {
-        // The file is a source file and can contain @test-module annotations
-        if (filename.indexOf('js/src') !== -1) {
-            if (sourceContents.includes('@test-module')) {
-                // Annotation detected, add some code to the source file
-                const moduleName = sourceContents.match(/@test-module (.*)/)[1];
-                // eslint-disable-next-line no-param-reassign
-                sourceContents += '\r\nmodule.exports = ' + moduleName + ';\r\n';
-            }
-            return sourceContents;
-        }
-        return sourceContents;
-    },
-};
diff --git a/test/jest/test-env.js b/test/jest/test-env.js
deleted file mode 100644
index 3276c5fa93..0000000000
--- a/test/jest/test-env.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/* eslint-env node */
-
-const $ = require('jquery');
-global.$ = $;
-global.jQuery = $;
-global.CommonParams = require('phpmyadmin/common');
-global.AJAX = require('phpmyadmin/ajax');
-global.Functions = require('phpmyadmin/functions');
diff --git a/webpack.config.js b/webpack.config.cjs
index 78c4847fda..78c4847fda 100644
--- a/webpack.config.js
+++ b/webpack.config.cjs