How to load jQuery mobile in browserify project?

Question

I'm trying to load jquery-mobile in my browserify project and getting an error because this refers to an empty object instead of the window object. Browserify is wrapping jquery-mobile in it's usual wrapper (function(require, module, exports){ ... }) but this is not in the scope of window.

package.json

{
  "dependencies": {
    "animate.css": "^3.1.1",
    "backbone": "^1.1.2",
    "backbone-query-parameters": "git://github.com/jhudson8/backbone-query-parameters",
    "backbone.marionette": "^2.3.1",
    "backbone.radio": "^0.6.0",
    "backbone.storage": "^0.1.0",
    "backbone.syphon": "^0.5.0",
    "bootstrap": "^3.3.1",
    "browserify-swap": "^0.2.1",
    "handlebars": "^1.3.0",
    "jquery": "^2.1.3",
    "jquery-mobile": "^1.4.1",
    "lodash": "^2.4.1",
    "nprogress": "^0.1.6"
  },
  "browser": {
    "bootstrap": "./node_modules/bootstrap/dist/js/bootstrap.js",
    "jquery-mobile": "./node_modules/jquery-mobile/dist/jquery.mobile.js"
  },
  "browserify-shim": {
    "bootstrap": {
      "depends": [
        "jquery:jQuery"
      ]
    },
    "jquery": "$",
    "jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] }
  },
  "browserify-swap": {
    "@packages": [
      "underscore"
    ],
    "dist": {
      "underscore.js$": "lodash"
    }
  },
  "browserify": {
    "transform": [
      "babelify",
      [
        "hbsfy",
        {
          "extensions": [
            "hbs"
          ]
        }
      ],
      "browserify-swap",
      "browserify-shim"
    ]
  }
}

Error Message

jquery.mobile.js:14931 Uncaught TypeError: Cannot read property 'jQuery' of undefined

Then I found moduleify

I found moduleify after a bit of googling and tried to use that in my package.json for jquery-mobile but I get an error. This is my updated transform configuration with moduleify:

  "browserify": {
    "transform": [
      "babelify",
      [
        "hbsfy",
        {
          "extensions": [
            "hbs"
          ]
        }
      ],
      [
        "moduleify",
        [
          "jquery.mobile"
        ]
      ],
      "browserify-swap",
      "browserify-shim"
    ]
  }

Doing this gives me an error with moduleify:

moduleify/index.js:9 var rules = Array.isArray(aliases) ? aliases : Object.keys(aliases).map(fu

Anyone have any suggestions on how to make this reference window? I feel like I'm on the right track but not sure what to do next. Thanks!

possible duplicate of [Including JQuery Mobile in a Node JS project with Browserify](http://stackoverflow.com/questions/21428993/including-jquery-mobile-in-a-node-js-project-with-browserify) — Jonathan Hall, Aug 18 '15 at 21:21

score 0 · Answer 1 · answered Mar 11 '15 at 04:09

0

In the first approach you do:

"jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:$" ] }

I think you need to do:

"jquery-mobile" : { "exports": "$.mobile", "depends": [ "jquery:jQuery" ] }

answered Mar 11 '15 at 04:09

Red2678

3,177
2
29
43

1

I tried that also but `this` remains `undefined`. jQuery mobile is looking for the `window` object to get `window.jQuery` to attach `.mobile` to it. Any other suggestions? – Glitches Mar 11 '15 at 04:39

How to load jQuery mobile in browserify project?

1 Answers1