Utilizing the Rangy library in a Vue component enables me to highlight individual words within text. Everything functions smoothly when Rangy is invoked from any method within the methods object:
let applier = rangy.createClassApplier('some-class');
applier.toggleRange(range);
However, I encountered an issue when attempting to restore a specific state upon page load by using the same method inside the created and mounted hooks.
The initial lines of the code in my component currently appear as follows:
import _ from 'lodash';
import rangy from 'rangy';
import 'rangy/lib/rangy-classapplier';
export default {
mounted: function() {
// Exit the function if no data needs to be restored from the database
if (_.isEmpty(this.mostRecentAnswers))
return;
else {
// ERROR
let applier = rangy.createClassApplier('some-class');
// ...
}
}
// ...
}
An error message stating
TypeError: rangy__WEBPACK_IMPORTED_MODULE_2___default.a.createClassApplier is not a function at VueComponent.mountedI am utilizing Vue with Laravel and Laravel Mix (which serves as a wrapper for Webpack).
What could be causing this issue in my code? It's worth mentioning that I import Lodash without encountering any errors.