Question

I’m trying to include jQuery Mobile in a project that uses RequireJS for AMD, however, I do not want to load jQuery Mobile in as an AMD module. The idea behind this is that we will be using AMD for application specific logic but any external library dependencies such as jQuery will be brought into global scope by just manually defining script tags.

The problem I’m having is defining a script tag for jQuery mobile before RequireJS script tag seems to cause RequireJS to define an anonymous module and create a conflict that I don’t understand. I looked at both the jQuery and jQuery Mobile code and they are set up to conditionally call the define() method if it exists. Since I am including those tags before RequireJS loads, they should not be calling define(). I double checked this with breakpoints and they indeed do not.

When I include jQuery Mobile I get the following error:

Error: Mismatched anonymous define() module: [object Object]

I don’t understand how this is happening if jQuery Mobile isn’t calling define(). What am I doing wrong here? Is this something with jQuery Mobile’s new conditional AMD support?

Answer 1

To confirm, you should be using the built version of jQuery mobile, and you should include it before the require.js tag like so — notice that jquery is included as a script tag since jQuery mobile depends on it:

<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.mobile.js"></script>
<script src="scripts/require.js" data-main="scripts/app"></script>

I expect that to work. The error you see may be generated if you have the scripts like this:

<script src="scripts/require.js" data-main="scripts/app"></script>
<script src="scripts/jquery.js"></script>
<script src="scripts/jquery.mobile.js"></script>

I consider this more of a problem with RequireJS, not jQuery mobile, something I want to fix for RequireJS 1.1. But the first set of script tags should work.

If that does not, it would be interesting to know more how your app’s JS module uses jQuery and jQuery mobile.