JQuery Dependancy - NPM issues

[LizzieCohaesus]

Hey,

I would like to be able to require('slick-carousel') without also needing to require('jquery'). I do not want to require jquery, it would be much more sensible for me to use a cdn of jquery as most browsers will then already have it cached.

(function(factory) { 'use strict'; if (typeof define === 'function' && define.amd) { define(['jquery'], factory); } else if (typeof exports !== 'undefined') { module.exports = factory(require('jquery')); } else { factory(jQuery); } }

is I believe what is causing the issue, there are a lot of suggestions online suggesting you go in and change the npm code to make it work, but that defeats the point of using npm so I do not want to have to do that. If you could find a way to resolve this it would be great! Thanks :).

[julienchazal]

+1

[ericorruption]

+1

[ghost]

+1

[leggomuhgreggo]

Makes sense to me!

[webdesignberlin]

+1

[micha149]

Its the right way to "require" jquery if a module system like CommonJS is available. When using a module system you want to avoid global modules.

If you are using CommonJS (which brings this require() thing), you are also using a bundler like browserify or wepack to make your code browser compatible. And this is where you have to inject your jQuery form the CDN. In Webpack this is done via a external definition with browserify you can use browserify-shim.

Hope this helps.

[leggomuhgreggo]

Spent a bit of time diggin into this; this UMD pattern for jQuery (discussed here) seems like it might be as universal as it gets, but I'd definitely want to test with a few different build scenarios.

// Uses CommonJS, AMD or browser globals to create a jQuery plugin.

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                // require('jQuery') returns a factory that requires window to
                // build a jQuery instance, we normalize how we use modules
                // that require this pattern but the window provided is a noop
                // if it's defined (how jquery works)
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    $.fn.jqueryPlugin = function () { return true; };
}));

@micha149 touched on this a bit, but I wanted to reiterate: With regard to Webpack specifically, there's a workaround for the current implementation (1.6.0) using the import loader.

Getting a fork going for testing would be the next step, if anyone has the bandwidth 😄

[blimpmason]

+1

[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. Using CDN jquery should be the same.

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.

[maxime-aknin]

Same for me. I had 2 versions of jQuery, one global and one as a node module. I wanted to use only the global one and remove the module dependancy. Solved it with webpack externals externals: { jquery: 'window.jQuery' }

[JamiesonRoberts]

@maxime-aknin Thank you for that, just had that issue, and your solution worked perfectly!