ES6 + jQuery + Bootstrap - Uncaught ReferenceError: jQuery is not defined?

Question

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

What you are using in import is an ES6 feature called "destructuring": it looks inside the object you are importing for two properties named $ and jQuery. The problem you have is that the actual object imported is the $ one. Try this instead: import $ from "jquery"; window.jQuery = $; — MarcoL
– MarcoL, Commented Oct 10, 2016 at 9:07
THen probably you have to say to webpack to make available the jQuery variable for other modules in the global namespace as shown in the answer of @galkowskit — MarcoL
– MarcoL, Commented Oct 10, 2016 at 9:38

Community · Accepted Answer · 2017-05-23 10:31:30Z

5

I've tried this answer and it worked.

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered May 11, 2017 at 3:01

dhqvinh

3575 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Francisco Daniel Over a year ago

This works really well! If you are interested how to achieve this in Angular 6 see these links: codeburst.io/… , github.com/sarbull/dapulse, Info and implementation.

MarcoL · Accepted Answer · 2016-10-10 10:43:01Z

2

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.

answered Oct 10, 2016 at 10:43

MarcoL

9,9893 gold badges40 silver badges50 bronze badges

2 Comments

Run Over a year ago

thanks but i got an error. did i put it right? please see my edit 2. thanks.

MarcoL Over a year ago

Remove the comment // or change it to jQuery. I've left it there as suggestion, but the JSON parser doesn't like it.

Tomasz Gałkowski · Accepted Answer · 2016-10-10 09:34:59Z

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';

answered Oct 10, 2016 at 9:34

Tomasz Gałkowski

1,9294 gold badges24 silver badges41 bronze badges

5 Comments

Run Over a year ago

i don't use webpack. i use gulp to compress the files.

Tomasz Gałkowski Over a year ago

What are you using as your module bundler? I think apart from minification with gulp you will need something that can make use of import/export syntax of ES6. Webpack, Browserify or System.js, etc. I don't think browsers suport ES6 modules just yet.

Run Over a year ago

i use Browserify, gulp

Run Over a year ago

import * as jQuery from 'jQuery'; still gives me the same error.

Sami-L Over a year ago

I am using Webpack in Angular 4 project, tried this solution but it didn't work.

Adidi · Accepted Answer · 2016-10-10 10:14:58Z

1

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

answered Oct 10, 2016 at 10:14

Adidi

5,2835 gold badges27 silver badges30 bronze badges

Comments

Bamieh · Accepted Answer · 2016-10-10 10:18:51Z

0

import jQuery from 'jquery';

or

import $ from 'jquery';

answered Oct 10, 2016 at 10:18

Bamieh

11k5 gold badges34 silver badges52 bronze badges

Collectives™ on Stack Overflow

ES6 + jQuery + Bootstrap - Uncaught ReferenceError: jQuery is not defined?

5 Answers 5

1 Comment

2 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related