ES6 code not working with jQuery

Question

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 1

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

import * as $ from 'jquery';

So $ would probably look something like this:

{Animation: function Animation(...),Callback: function (...), Deferred: function(...), default: function(selector, context){}, fn: Object[0], .... }

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.

Answer 2

I finally got the same file working with both es6 and typescript. I actually changed the code to use require('jquery') instead of import $ from 'jquery' . So here is the final code

Final ES6 code snippet

var $ = require('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 with Webpack that uses this as es6

'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
var setupObject = function setupObject(element) {
  var $ = __webpack_require__(1);
  var aButton = $(dropdownButtonSelector); 
  ...
};

exports.default = setupDropdown;

Transpiled ES5 code with Webpack that uses this as typescript

 !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__, exports], __WEBPACK_AMD_DEFINE_RESULT__ = function (require, exports) {
"use strict";
   var setupObject = function setupObject(element) {
      var $ = __webpack_require__(10);
      var aButton = $(dropdownButtonSelector);
      ...
   }
   Object.defineProperty(exports, "__esModule", { value: true });
   exports.default = setupDropdown;
 }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));