Suresh Koya Suresh Koya - 6 months ago 42
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 (Object.prototype.hasOwnProperty.call(obj, 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;

Answer

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

(See: http://www.2ality.com/2014/09/es6-modules-final.html#more_on_importing_and_exporting)

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.