cli: Error with auto-traced jQuery and Bootstrap v3
I’m submitting a bug report
- Library Version: 1.0.0-beta.3
Please tell us about your environment:
-
Operating System: OSX 10.x
-
Node Version: 8.12.0
-
NPM Version: yarn 1.10.1
-
Browser: Chrome 70 | Firefox 63.0 | Safari 12.0
-
Language: ESNext
-
Loader/bundler: RequireJS
Current behavior:
I’ve just upgraded an old app of mine from Aurelia-cli v0.33.0 to 1.0.0-beta.3. Due to the major changes, I tried to use the recipes described in the cookbook for both jQuery and Bootstrap v3.
The recipe for jQuery basically says it can be auto-traced (so I removed it from my aurelia.json).
The recipe for bootstrap v3 says it shall be manually configured in aurelia.json (so I updated my conf to remove the CSS resource I have previously added, but that was it).
When using both recipes, and since bootstrap depends on jQuery, my app is bundled without warning, but when I execute it, I got an error where Bootstrap says it requires jQuery but can’t find it, whereas au-cli has the (expected) following trace:
INFO [Bundler] Auto tracing package: 3.3.1 jquery
When I add the jQuery dependency back into my aurelia.json, everything works as expected.
Since jQuery is auto-traced, it is probably added (in the vendor-bundle.js file) AFTER the manually-traced Bootstrap v3 library, even though bootstrap explicitly depends on jQuery. I guess that when jQuery is manually-traced, dependency resolution succeeds in placing jQuery before Bootstrap v3 and thus it explains why my app works.
-
What is the expected behavior? I expect my application not to crash when I follow the recipes. 😃
-
What is the motivation / use case for changing the behavior? I want the conjunction of the two recipes to work (but I’m not sure it is even possible without a major rewrite), or at least have the legacy bootstrap’s recipe corrected to reflect the incompatibility of the two recipes.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 28 (24 by maintainers)
Ok, I can confirm it’s working for me now. 👍 Many thanks. 😄
Don’t worry, I’ve always had a workaround by setting
jQueryin the"prepend"array property in aurelia.json, or even in the usual"dependencies"too. But it’s not needed anymore, andjQueryis now correctly sorted AND auto-traced. 😄Hi @chabou-san can you try
"aurelia-cli": "huochunpeng/cli#fix-shim-order-again"?Awesome!
✅ Done on Aurelia-discourse.
Ah, ok. But I can tell that the array
bundleFilesstill containsjqueryafterbootstrap. Not sure if that helps, but I could provide you with my full list of dependencies, or custom steps I could execute to help you. Also, custom logs I added seem to show that in the shim sorting function,jqueryis never tested againstbootstrap. 😮 They are just both called a unique time, against another dependency (which is@fortawesome/fontawesome-free-solidFTR)Edit: the more I think of it, the more I’m convinced that it comes from the use of a
sortfunction where 0 is returned when 2 modules are not related. Due to the comparison of@fortawesome/fontawesome-free-solidvsbootstrap(returns 0) and@fortawesome/fontawesome-free-solidvsjquery(returns 0), it shall think thatjqueryandbootstrapare “equal” and thus doesn’t need to be compared, thus they’re not sorted.Just tested it, and it’s not fixed sorry. So I’ve taken a quick look at your PR and the related code, and here’s something that might be helpful: I’ve logged the array from
getBundledFilesand my jQuery dependency is listed asjquery/dist/jquery. But when the (double) sort is done, dependencies are based on what’s listed inaurelia.json. And in my case, forbootstrap, the dependency isjquery. Therefore the following sort function (the one based on dependencies) doesn’t work as expected since “jquery” <> “jquery/dist/jquery”.Am I making myself clear ?