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.
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:
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"
],
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 $;});';
}
});
}
Thanks, I added "update 2" section with the problem.
Sorry, I think I missed something. Try
if (moduleId === 'jquery') return 'define(function(){return $;});';
. I am away from computer, let me know if it works, I will update answer after.With this modification, IT WORKS! Thanks a lot.