Loading order jQuery UI and Oracle MapViewer in RequireJS

Question

I wanted to use jQuery UI Accordion in my module, but I always got div.accordion is not a function if I include Oracle MapViewer library. This library doesn't support AMD yet, so I defined its dependency in shim. All libraries are loaded in the following order: jQuery UI, jQuery, (Oracle MapViewer). I thought jQuery should be loaded first, but that order works, except when I load Oracle MapViewer.

My HTML

<!--in head-->
<script src="lib/require.min.js" data-main="app"></script>

<!--in body-->
<div id="accordion">
  <h3>Section 1</h3>
  <div>Vestibulum a velit eu ante scelerisque vulputate.</div>
  <h3>Section 2</h3>
  <div>Vivamus non quam. In suscipit faucibus urna.</div>
</div>

My app.js

require.config({
    paths: {
        "jquery": "lib/jquery-1.12.3",
        "jquery-ui": "lib/jquery-ui",
        "oraclemaps": "lib/oraclemapsv2"
    },
    shim: {
        "oraclemaps": ['jquery']
    }
});

require(['oraclemaps', 'jquery-ui'], function ()
{
    $("#accordion").accordion();
});

Any idea how to use the Oracle MapViewer library in RequireJS? I use jQuery 1.12.3 and jQuery UI 1.11.4 (all components).

Answer 1

oraclemaps includes jQuery, so we could opt to use their version. The configuration would be like this:

require.config({
    paths: {
        "jquery-ui": "lib/jquery-ui.min",
        "oraclemaps": "lib/oraclemapsv2"
    },
    shim: {
        "jquery-ui": ["oraclemaps"]
    }
});

require(["jquery-ui"], function ()
{
    $("#accordion").accordion();
});

Answer 2

Try to change you shim section of the first example like this:

shim: {
    "jquery-ui": {
        export:"$" ,
        deps: ['jquery']
    }
}

Or update to the latest jQuery-ui version which at last supports AMD loading.