Suresh Koya Suresh Koya - 1 year ago 73
Javascript Question

ES6 code not working with jQuery

I have a es6 js file that is used as a library. The js file depends on jquery as you see. I am using Webpack.

In the JS file, I have the line below which results in _interopRequireWildcard in the eventual es5 code that I copied below. Since jquery is not esModule, after evaluating the condition

obj && obj.__esModule
, the jQuery function get copied to a Object. I am also using this code with typescript. It works with Typescript but is failing with es6.

ES6 code snippet

import * as $ from 'jquery';

let setupObject = function setupObject(element) {
let aButton = $(dropdownButtonSelector); //Fail's here with error
//Uncaught TypeError: $ is not a function
exports default setupObject;

Transpiled ES5 code

Object.defineProperty(exports, "__esModule", {
value: true

var _jquery = __webpack_require__(1);

var $ = _interopRequireWildcard(_jquery);

function _interopRequireWildcard(obj) {
if (obj && obj.__esModule) { //obj.__esModule = undefined for jquery
return obj;
} else {
var newObj = {};
if (obj != null ) {
for (var key in obj) {
if (, key))
newObj[key] = obj[key];
newObj.default = obj;
return newObj;

var setupObject = function setupObject(element) {
var aButton = $(dropdownButtonSelector); //Fail's here with error
//Uncaught TypeError: $ is not a function
exports.default = setupObject;


Your import takes all available imports and wraps them in an object:

import * as $ from 'jquery';

So $ would probably look something like this:

{ default: function jQuery() }

Thus your TypeError:

Uncaught TypeError: $ is not a function


Try using the following statement instead, it will only import the default export:

import $ from 'jquery';

Since your jQuery probably still has CommonJS exports (module.exports), its exports will automatically be mapped to export default by babel.