Trying to use jquery and jquery-ujs with Browserify but getting Uncaught ReferenceError: jQuery is not defined

Question

I'm working on a ruby on rails project and am using Browserify to manage javascript dependencies etc. However, when I run the application I keep getting a "Uncaught ReferenceError: jQuery is not defined" because jquery-ujs tries to call jQuery but it's not available. I know jQuery is being loaded on page because when I include the code below without import 'jquery-ujs' I am able to successfully use jQuery by calling both $ and jQuery. However, I can't seem to be able to also include 'jquery-ujs'.

import 'jquery';
import $ from 'jquery';
global.jQuery  = $;
import 'jquery-ujs'

And here is my package.json file:

{
  "name": "frontend",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "watchify": "watchify -vd -p browserify-hmr -e frontend/application.js -o app/assets/javascripts/application.js",
    "build": "cross-env NODE_ENV=production browserify frontend/application.js | uglifyjs -c warnings=false -m > app/assets/javascripts/application.js"
  },
  "dependencies": {
    "jquery": "^2.2.4",
    "jquery-ujs": "^1.2.2",
    "vue": "^1.0.0",
    "vue-resource": "^0.7.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-runtime": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^12.0.1",
    "browserify-hmr": "^0.3.1",
    "browserify-shim": "^3.8.12",
    "cross-env": "^1.0.6",
    "uglify-js": "^2.5.0",
    "vue-hot-reload-api": "^1.2.2",
    "vueify": "^8.0.0",
    "vueify-insert-css": "^1.0.0",
    "watchify": "^3.4.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify",
      "browserify-shim"
    ]
  }
}

This is written in my application.js file along with a lot of other stuff which is generated with browserify:

var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
require('jquery-ujs');

@luissimo the application.js file is generated with browserify so it is extremely long 10,000+ lines so I don't think its feasible to post the whole thing on here. Is there something specific you're looking for? — dpst
– dpst, Commented Sep 9, 2016 at 9:48
Yeah just the require part '//= require jquery //= require jquery_ujs' etc — luissimo
– luissimo, Commented Sep 9, 2016 at 9:57
@luissimo added the require parts but as I am using browserify and not sprockets it's not in the same format as what you wrote — dpst
– dpst, Commented Sep 9, 2016 at 10:19
Oh oke , in your application.html.erb try including the jquery script before all other scripts. — luissimo
– luissimo, Commented Sep 9, 2016 at 10:25

dpst · Accepted Answer · 2016-09-10 14:34:51Z

1

I was able to get it to work by adding these lines. I'm not sure why you have to use require instead of import in this case...

import $ from 'jquery';
global.jQuery = $
require('jquery-ujs')

answered Sep 10, 2016 at 14:34

dpst

1,2831 gold badge15 silver badges24 bronze badges

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

Collectives™ on Stack Overflow

Trying to use jquery and jquery-ujs with Browserify but getting Uncaught ReferenceError: jQuery is not defined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related