using jquery-ui with browserify

Question

My source browserify coffeeify file:

$ = jQuery = require 'jquery'
require 'jq-ui'
$ ->
    jqueryUiIsLoaded = jQuery.ui
    console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"

which I convert to main.js with command:

browserify source.coffee -t coffeeify > main.js --debug

My package.json:

{
  "name": "jquery_ui_test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "main": "browserify source.coffee -t coffeeify > main.js --debug"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "jq-ui": "./node_modules/jquery-ui/jquery-ui.js"
  },
  "browserify-shim": {
    "jquery": "$",
    "jq-ui": {
      "exports": "jq-ui",
      "depends": [
        "jquery:jQuery"
      ]
    }
  },
  "dependencies": {
    "coffee-script": "*"
  },
  "devDependencies": {
    "browserify": "^6.0.2",
    "coffeeify": "^0.7.0",
    "jquery": "^2.1.1",
    "jquery-ui": "^1.10.5"
  }
}

My html:

<html>
<head>
    <script src='./main.js'/>
</head>
</html>

In browser console I see that jquery ui is not loaded:

jquery-ui is loaded: undefined source.coffee:5

What should I do to make jquery-ui load with browserify?

Did you ever get this to work without using Bower?

rink.attendant.6
– rink.attendant.6

2015-11-17 04:13:38 +00:00
Commented Nov 17, 2015 at 4:13 — rink.attendant.6
– rink.attendant.6, Commented Nov 17, 2015 at 4:13

Maksim Yefremov · Accepted Answer · 2014-10-05 03:57:53Z

1

The solution was in using debowerify: I installed jquery and jquery-ui via bower. My package.json is:

{
  "name": "jquery_ui_test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "main": "browserify source.coffee -t coffeeify -t debowerify > main.js --debug"
  },
  "dependencies": {
    "coffee-script": "*"
  },
  "devDependencies": {
    "browserify": "<6",
    "coffeeify": "^0.7.0",
    "debowerify": "^0.8.2"
  }
}

My source.coffee is :

$ = window.jQuery = require("jquery")
require "jquery-ui"
jqueryUiIsLoaded = jQuery.ui
console.log "jquery-ui is loaded: #{jqueryUiIsLoaded}"

And browser console output is:

jquery-ui is loaded: [object Object]

So jquery-ui is working.

answered Oct 5, 2014 at 3:57

Maksim Yefremov

14.3k28 gold badges124 silver badges171 bronze badges

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

4 Comments

Ian Warburton Over a year ago

So how do you load for example just the autocomplete without it loading the whole library?

Maksim Yefremov Over a year ago

I don't think it is possible to load autocomplete without the whole jquery ui, isn't it?

Ian Warburton Over a year ago

Normally you can pick and choose what gets included... jqueryui.com/download

Maksim Yefremov Over a year ago

@IanWarburton nice to know. I this case debowefy will not help you or you can work around by replacing ./bower_components/jquery-ui/jquery-ui.js by your cutted version.

Collectives™ on Stack Overflow

using jquery-ui with browserify

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related