Select2: Select2 + Browserify-shim

[ethanclevenger91]

Prerequisites

• [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate
• [X] The issue still exists against the latest master branch of Select2
• [X] This is not a usage question (Those should be directed to the community)
• [X] I have attempted to find the simplest possible steos to reproduce the issue

• [X] I have included a failing test as a pull request (Optional)

  Steps to reproduce the issue

• Set up dummy site. index.html is sufficient with a single select element.

• Install Select2 via npm
• Require jQuery from a CDN (not using npm) on site
• JS file as such:

var $ = require('jQuery');
var select2 = require('select2');
$('select').select2({
    placeholder: "Select"
});

• Set up browserify and browserify-shim as detailed here: http://stackoverflow.com/a/23129051/2233690
• Run browserify
• Require the resulting JS on the dummy site after jQuery
  

  Expected behavior and actual behavior

When I follow those steps, I see...

console error on page load:

$('select').select2 is not a function

I was expecting...
Functional select2

Environment

Browsers

• [X] Google Chrome
• [ ] Mozilla Firefox
• [ ] Internet Explorer

Operating System

• [X] Windows
• [ ] Mac OS X
• [ ] Linux
• [ ] Mobile

Libraries

• jQuery version: 1.12.4
• Select2 version: 4.0.3

Isolating the problem

• [ ] This bug happens on the examples page
• [X] The bug happens consistently across all tested browsers
• [X] This bug happens when using Select2 without other pluigns
• [ ] I can reproduce this bug in a jsbin

Fairly certain this is a similar issue to the one here: https://github.com/kenwheeler/slick/issues/1792. Use case is WordPress - best practice is to depend on the WordPress version of jQuery - _not_ loading your own, as other plugins/theme elements also depend on jQuery and devs shouldn't be loading it twice.

[jashwant]

@ethanclevenger91 , did you find a fix ?

[jashwant]

@ethanclevenger91 ,

Just found a solution. Though, I use browserify api through gulp, but it may help you.

I was using wordpress. Hence, I was kind of forced to use the wordpress core's jQuery, available in window object.

It was generating slick() not defined error, when I tried to use slick() plugin from npm. Adding browserify-shim didn't help much.

I did some digging and found out that require('jquery') was not consistent always.

In my theme javascript file, it was calling the wordpress core's jquery.

But, in slick jquery plugin it was calling the latest jquery from node modules.

Finally, I was able to solve it. So, sharing the package.json and gulpfile configuration.

package.json:

"browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
    "jquery": "global:jQuery"
  },

gulpfile.babel.js:

browserify({entries: 'main.js', extensions: ['js'], debug: true})
    .transform(babelify.configure({
      presets: ["es2015"]
    }))
    .transform('browserify-shim', {global: true})

Doing transform 'browserify-shim' was crucial part, I was missing earlier. Without it browserify-shim was not consistent.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.