Browserify with jQuery plugins

Question

I'm trying to get some jQuery plugins to work with browserify. I have my package.json setup like this:

  "browser": {
    "jquery": "./client/js/vendors/jquery-2.2.2.min.js",
    "jquery-validation": "./client/js/vendors/jquery.validate.js"
  },
  "browserify-shim": {
    "jquery": "global:$"
  },

However, when I require('jquery-validation'), I get cannot read property fn of undefined as it relates to this plugin. I'm trying to also have it so that $ will be global as it's used all over, without having to require it.

I've seen so many different articles and configs for this, but nothing seems to work.

Any suggestions or clarity would be greatly appreciated.

EDIT:

I also sometimes get Uncaught Error: Cannot find module 'jquery'

Joseph Garrone · Accepted Answer · 2016-11-01 13:28:51Z

1

You don't need to shim jquery, it's conpatible with node yoo can simply install it with npm install jquery --save and make var $= require("jquery") in your code.
Yo do need to shim jquery.validate.

package.json:

{  
   "browser":{  
      "jquery-validation":"./node_modules/jquery-validation/dist/jquery.validate.js"
   },
   "browserify-shim":{  
      "jquery-validation":{  
         "depends":[  
            "jquery:jQuery"
         ]
      }
   },
   "browserify":{  
      "transform":[  
         "browserify-shim"
      ]
   },
   "dependencies":{  
      "jquery":"^2.0.0",
      "jquery-validation":"^1.15.1"
   }
}

Note: jquery.validate depend on jQuery version 2.0^ ( you can see in the package.json file of the jquery-validation's npm package ) so you have to set dependency on jquery ^2.0 in your project otherwise jquery-validation will load he's own version of jQuery and integration will not work.

edited Nov 1, 2016 at 13:28

answered Oct 22, 2016 at 22:18

Joseph Garrone

1,8221 gold badge21 silver badges22 bronze badges

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

Comments

gabesoft · Accepted Answer · 2016-03-18 21:30:44Z

0

It seems like you have typo, you should call require('jquery-validation') instead of require('jquery-validate')

answered Mar 18, 2016 at 21:30

gabesoft

1,2289 silver badges6 bronze badges

1 Comment

dzm Over a year ago

Sorry, that was a typo in my question.

Collectives™ on Stack Overflow

Browserify with jQuery plugins

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related