Use Wrapbootstrap theme with Aurelia

Question

I am trying to use a WrapBootstrapTheme with Aurelia-js and I have difficulties. I use Aurelia CLI bundler with requirejs and Typescript.

I have added the theme script (app.min.js) into the index.html file like this:

<body>
    <!-- begin #page-loader -->
    <div id="page-loader" class="fade show">
        <span class="spinner"></span>
    </div>
    <!-- end #page-loader -->

    <div id="page-container" aurelia-app="main" class="fade page-sidebar-fixed page-header-fixed gradient-enabled">        
    </div>
</body>
<script src="/scripts/app.min.js"></script>
<script src="/scripts/vendor-bundle.js" data-main="aurelia-bootstrapper"></script>

Everything work fine and the theme script works, aurelia binding works. But if I try to use JQuery, by importing it into main.ts I am getting an error:

app.min.js:1 Uncaught TypeError: $(...).sortable is not a function
at handleDraggablePanel (app.min.js:1)
at Object.initComponent (app.min.js:1)
at Object.init (app.min.js:1)
at HTMLDocument.<anonymous> (app.min.js:1)
at t (app.min.js:1)
at e (app.min.js:1)

I know that Jquery, Jquery-ui and bootstrap are included in the theme script.

How can I make this to work?

Thanks

Update @bigopon The theme has 1 script "app.min.js". I have included this script in the Index.html like i wrote above. Then I tried to use aurelia-jstree plugin. After I included the plugin in the main.ts file, the error ($(...).sortable is not a function) appeared. Then I noticed that whenever I use a plugin or anything that uses jquery or including jquery itself in the app.ts or main.tss or any .ts file, i get the same error. I saw that the theme script "app.min.js" has jquery and jquery-ui-dist included in it. So the problem seem the order of script execution. Where the jquery and jquery-ui-dist in the theme script executes first, and the jquery that I include in Aurelia app executes at a latter time and overrides the first one.

Now I tried to include the theme source script without the jquery and jquery-ui-dist in it. I also got the same error. Maybe my configuration in aurelia project json file is wrong. I don't know how to include the theme script with all dependencies and that works. I even tried to set shim = true but with no success.

I've made a tst repo on gitlab: test app

Update 2 @huocp Thanks for the response, but... I went with the second option, of removing jquery in the build process. I left the include "jquery" in the main.ts. Now I get new error:

I have updated the repo with the change. Why I went with the second one, because I know that sometimes in the future I will be required to use jquery. Also I use typescript so I must import the modules else I get compile errors. I have also the theme script without the jquery ini it (also in the repo) but then I don't know how to configure aurelia so the script keeps working by using the jquery and jquery ui from the vendors bundle.

This probably means the order is wrong. How do you incldue those scripts at the moment? — bigopon
I think you could levergage the shim configuration. I'll ping Chungpeng Huo for this. — bigopon

huocp huocp · Accepted Answer · 2020-02-02T08:07:35

Your src/main.ts has import "jquery" which causes cli-bundler to pack jquery into vendor-bundle.js.

You don't want that jquery, because the theme js already provided jquery.

The solution is simple, just remove import "jquery" from src/main.ts.

Note you might want to use other jquery plugins in your app, when you do import "jquery-foo";, that plugin will likely depend on jquery which will cause cli-bundler to pack jquery into vendor-bundle.js again.

To prevent jquery from packed into vendor bundle. You have two options:

never do import foo from "jquery-foo", but use aurelia.json prepend for all jquery plugins. Like:

"prepend": [
  // don't prepend jquery here because them had it!
  // prepend all jquery plugins
  "node_modules/jquery-foo/to/main/file.js",
  "node_modules/whatwg-fetch/dist/fetch.umd.js",
  "node_modules/promise-polyfill/dist/polyfill.min.js",
  "node_modules/requirejs/require.js"
],

use import foo from "jquery-foo", you can even use import "jquery", then modify your tasks/build.ts.

  function writeBundles() {
    return buildCLI.dest({
      onRequiringModule: function(moduleId) {
        // This prevents cli-bundler from packing jquery
        // into vendor-bundle, just return global var $
        // which is created by your theme js.
        if (moduleId === 'jquery') return 'define(function(){return $;});';
      }
    });
  }

Use Wrapbootstrap theme with Aurelia

1 Answers