“TypeError: jquery__WEBPACK_IMPORTED_MODULE_0__ is not a function” with jQuery 4 (ESM) #256

Activity

1. anlambert commented on Jan 27, 2026

   

   anlambert

   on Jan 27, 2026

   Last edited by anlambert

   More actions

   I also encountered that issue when migrating the project I am working on to jQuery 4 as I also exposed $ and jQuery globally using expose-loader.

   I managed to workaround it by using modify-source-webpack-plugin to rewrite the ESM import statements on the fly so that jQuery can be imported the correct way.

   Below is the modified webpack.config.mjs from the gist linked above.

   import {ModifySourcePlugin, ReplaceOperation} from "modify-source-webpack-plugin";
   import HtmlWebpackPlugin from "html-webpack-plugin";
   import resolve from "enhanced-resolve";
   
   const myResolve = resolve.create.sync({ conditionNames: ["import", "module"] });
   
   export default {
     entry: ["./cjs.cjs", "./esm.mjs"],
     module: {
       rules: [
         {
           test: myResolve(import.meta.dirname, "jquery"),
           loader: "expose-loader",
           type: "javascript/auto",
           options: {
             exposes: [
               {
                 globalName: "$",
                 moduleLocalName: "$",
                 override: true
               },
               {
                 globalName: "jQuery",
                 moduleLocalName: "jQuery",
                 override: true
               }]
           },
         },
       ],
     },
     plugins: [
       new HtmlWebpackPlugin(),
       // ensure jQuery 4.0 can be imported from a js module when exposed globally by webpack expose-loader
       new ModifySourcePlugin({
         rules: [
           {
             test: /\.mjs$/,
             operations: [
               new ReplaceOperation('all', "import jQuery from 'jquery'", "import {jQuery} from 'jquery'"),
               new ReplaceOperation('all', 'import jQuery from "jquery"', 'import {jQuery} from "jquery"'),
               new ReplaceOperation('all', "import \\$ from 'jquery'", "import {$$} from 'jquery'"),
               new ReplaceOperation('all', 'import \\$ from "jquery"', 'import {$$} from "jquery"')
             ]
           }
         ]
       })
     ],
   };
2. alexander-akait commented on Jan 28, 2026

   

   alexander-akait

   on Jan 28, 2026

   Member

   More actions

   Just interesting why do you still use this loader (it was created for really old code), why do not use directly at the top of your entrypoint:

   import { jQuery as $ } from 'jquery';
   
   globalThis.$ = $;
3. alexander-akait commented on Jan 28, 2026

   

   alexander-akait

   on Jan 28, 2026

   Last edited by alexander-akait

   Member

   More actions

   There are three solution:

   1. globalThis supported and you polyfill it

   import jQuery from 'jquery';
   
   globalThis.$ = jQuery;
   globalThis.jQuery = jQuery;
   
   // ... more code or in other module
   
   $(document).ready(function(){
   	$("button").click(function(){
   		$("p").hide(); // Selects all <p> elements and hides them
   	});
   });

   2. globalThis is not supported or you don't polyfill globalThis

   import jQuery from 'jquery';
   
   var getGlobal = function () {
   	if (typeof globalThis !== 'undefined') { return globalThis; }
   	if (typeof window !== 'undefined') { return window; }
   	if (typeof self !== 'undefined') { return self; }
   	if (typeof global !== 'undefined') { return global; }
   	return (function () { return this; })() || Function('return this')()
   };
   
   const pseudoGlobalThis = getGlobal();
   
   pseudoGlobalThis.$ = jQuery;
   pseudoGlobalThis.jQuery = jQuery;
   
   $(document).ready(function(){
   	$("button").click(function(){
   		$("p").hide(); // Selects all <p> elements and hides them
   	});
   });

   3. Using such configuration (RECOMMENDED for jQuery):

   webpack.config.js

   {
     plugins: [
       new webpack.ProvidePlugin({
         "$": ["jquery", "default"],
         "jQuery": ["jquery", "default"],
       })
     ],
   }

   $(document).ready(function(){
   	$("button").click(function(){
   		$("p").hide(); // Selects all <p> elements and hides them
   	});
   });
4. alexander-akait commented on Jan 28, 2026

   

   alexander-akait

   on Jan 28, 2026

   Member

   More actions

   Feel free to feedback, soon this loader will be deprecated, I will provide link in webpack examples with jQuery example for other developers
5. anlambert commented on Jan 29, 2026

   

   anlambert

   on Jan 29, 2026

   Last edited by anlambert

   More actions

   Just interesting why do you still use this loader (it was created for really old code),

   The project I am working on uses some legacy dependencies that expect $ or jQuery to be in the global scope so the use of that loader.

   why do not use directly at the top of your entrypoint:

   import { jQuery as $ } from 'jquery';

   globalThis.$ = $;

   Oh I did not know about this, thanks !

   I confirm that it works great and it simplifies my webpack config a lot.

   For those interested, see this commit migrating my webpack project to jQuery 4.0.

   I also polyfilled globalThis using babel-plugin-transform-globalthis for older browsers.

   ❤️React with ❤️1Reacted by Alexander Akait