Using bootstrap-tour with Aurelia - aurelia

Question

I have not been able to find a good example of how to use Bootstrap Tour with Aurelia. I installed it with yarn (yarn add bootstrap-tour) and added the dependencies in main.js as follows:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-tour/build/css/bootstrap-tour.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'bootstrap-tour/build/js/bootstrap-tour.min.js';
Now I would like to use it in one of my view-models. Here is what I've tried:
import { Tour } from 'bootstrap-tour';
In my class definition:
#inject(Store, EventAggregator, I18N, Router, Tour)
export default class {
constructor(store, events, i18n, router, tour) {
this.store = store;
this.events = events;
this.i18n = i18n;
this.router = router;
this.tour = tour;
}
// ... other methods and code
startTour() {
const tourNewReports = new this.tour({
steps: [
{
element: '#tour-btn-menu',
title: 'New reports!',
content: 'Check out new reports!',
},
{
element: '.tour-label-product',
title: 'Product report',
content: 'Click on a specific product to see more reports.',
},
],
});
tourNewReports.init();
tourNewReports.start();
}
}
However, this doesn't even compile and I get the following error:
Error: Error invoking _class3. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
I've also tried skipping the injection and just using const tourNewReports = new Tour({, but I get this error:
bootstrap_tour__WEBPACK_IMPORTED_MODULE_6__.Tour is not a constructor
at _class3.startTour
What am I doing wrong?

Answer 1

The comments from Cristián Ormazábal, avrahamcool and Rabah G helped me with this issue. The simplest solution was:
import Tour from 'bootstrap-tour';
Then, use it directly as follows:
startTour() {
const tourNewReports = new Tour({
steps: [
{
element: '#tour-btn-menu',
title: 'New reports!',
content: 'Check out new reports!',
},
{
element: '.tour-label-product',
title: 'Product report',
content: 'Click on a specific product to see more reports.',
},
],
});
tourNewReports.init();
tourNewReports.start();
}
However, in the end, it appears that bootstrap-tour may be an abandoned repo. It's currently incompatible with Bootstrap 3.4.1 (the latest v3 release), and therefore useless to me. If someone still wants to use it, there are a couple workarounds and an alternate forked repo posted here:
https://github.com/sorich87/bootstrap-tour/issues/723