skip to Main Content

How can I import jQuery as the dependency for bootstrap in ES6?

I tried with:

import {$,jQuery}  from 'jquery';
import bootstrap from 'bootstrap';

But I always get this error:

transition.js:59 Uncaught ReferenceError: jQuery is not defined

Which points to this file:

/* ========================================================================
 * Bootstrap: transition.js v3.3.7
 * http://getbootstrap.com/javascript/#transitions
 * ========================================================================
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+function ($) {
  'use strict';

  // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
  // ============================================================

  function transitionEnd() {
    var el = document.createElement('bootstrap')

    var transEndEventNames = {
      WebkitTransition : 'webkitTransitionEnd',
      MozTransition    : 'transitionend',
      OTransition      : 'oTransitionEnd otransitionend',
      transition       : 'transitionend'
    }

    for (var name in transEndEventNames) {
      if (el.style[name] !== undefined) {
        return { end: transEndEventNames[name] }
      }
    }

    return false // explicit for ie8 (  ._.)
  }

  // http://blog.alexmaccaw.com/css-transitions
  $.fn.emulateTransitionEnd = function (duration) {
    var called = false
    var $el = this
    $(this).one('bsTransitionEnd', function () { called = true })
    var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
    setTimeout(callback, duration)
    return this
  }

  $(function () {
    $.support.transition = transitionEnd()

    if (!$.support.transition) return

    $.event.special.bsTransitionEnd = {
      bindType: $.support.transition.end,
      delegateType: $.support.transition.end,
      handle: function (e) {
        if ($(e.target).is(this)) return e.handleObj.handler.apply(this, arguments)
      }
    }
  })

}(jQuery);

Any ideas?

EDIT:

my gulp file:

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var gutil = require('gulp-util');

gulp.task('es6', function() {
    browserify({
        entries: 'js/app.js',
        debug: true
    })
    .transform(babelify, { presets: ['es2015'] })
    .on('error',gutil.log)
    .bundle()
    .on('error',gutil.log)
    .pipe(source('compile.js'))
    .pipe(gulp.dest('js'));
});

gulp.task('default', ['es6']);

EDIT 2:

package.json:

{
  "name": "es6",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "gulp": "^3.9.1",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "pump": "^1.0.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js",
  },
  "browserify-shim": {
    "jquery": "$", // or change it to jQuery
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

error:

Starting ‘build’… events.js:160
throw er; // Unhandled ‘error’ event
^

Error: SyntaxError: Unexpected token } in JSON at position 526 while
parsing json file

5

Answers


  1. In Webpack I usually use (webpack.config.js):

    externals: {
      jquery: "jQuery"
    }
    

    And then:

    import jQuery from 'jQuery';
    

    You could also try:

    import * as jQuery from 'jQuery';
    
    Login or Signup to reply.
  2. If you are using curley bracket in es6 you are saying you want only that segment from several segment this module returns.
    Jquery expose only one thing so you could do:
    import $ from 'jquery';
    Or
    import jQuery from 'jquery';
    It will always expose to one default variable

    Login or Signup to reply.
  3. import jQuery from 'jquery';
    

    or

    import $ from 'jquery';
    
    Login or Signup to reply.
  4. In general the destructuring you are doing in the import is not right, as the $ or jQuery object is the main one:

    import $ from 'jquery';
    
    // or
    import jQuery from 'jquery'
    

    In your case you are dealing with a module (boostrap-transition) which does want jQuery in the global scope to be used.
    I had a similar issue some time ago with the materialize module too on this thing.

    If you are using webpack you can follow @galkowskit answer steps.
    In case you are using browserify instead, what you need is a browserify transform as the follow:

    "browser": {
      "jquery": "./node_modules/jquery/dist/jquery.js",
    },
    "browserify-shim": {
      "jquery": "$", // or change it to jQuery
    },
    "browserify": {
      "transform": [
        "browserify-shim"
      ]
    }
    

    You can put this inside your package.json file: when Gulp is going to call browserify it will read your package.json for configuration tips and execute this shim for jQuery.

    Login or Signup to reply.
  5. I’ve tried this answer and it worked.

    // webpack.config.js
    module.exports = {
        ...
        plugins: [
            new webpack.ProvidePlugin({
               $: "jquery",
               jQuery: "jquery"
           })
        ]
    };
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search