Ways to integrate npm dependencies into your Cordova plugin

Currently working on implementing a Cordova plugin called core-cordova found in this repository. This particular plugin has a dependency on another NPM package.

The issue arises after installing the plugin in my app using:

$ cordova plugin add @aerogearservices/core-cordova

Upon installation, I encountered this error in the console:

Uncaught module @aerogearservices/core not found

I believe that I need to somehow bundle this dependency into the plugin's JS files. I attempted to use Browserify to consolidate everything into a single file named dist/core-cordova.js and referenced it in the Plugin.xml as follows:

<js-module src="dist/core-cordova.js" name="MetricsService">
    <clobbers target="cordova.aerogear" />
</js-module>

Although this method did not generate any errors, the aerogear object remained empty when accessed:

// Browser's dev console

> window.cordova.aerogear;
-> {}

> window.cordova.aerogear.MetricsService;
-> undefined

This dilemma has left me puzzled. Any suggestions on how to resolve this?

NOTE: The source code is a work in progress and may undergo changes or contain errors.

javascriptcordovatypescriptnode-modulesapache-cordova

Answer №1

Resolved the issue of an empty object by utilizing webpack to package the module and configuring the libraryTarget as 'window' in my webpack settings.

Referencing the official webpack documentation:

libraryTarget: 'window' - This sets up the entry point return value to be assigned to the window object based on the output.library setting.

Without this adjustment, the bundled script was not exporting in a manner that could be accessed from my plugin. It seems that Cordova wraps the JS during its loading process with another function, which hinders the automatic assignment to the window object that would typically occur. Furthermore, since my packaged script wasn't explicitly exporting anything, Cordova was unable to recognize any content to assign to the window object through the clobbers tag.

It is worth noting that with this configuration, there is no longer a need for the clobbers tag.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I retrieve information from SafeSubscriber?

I need to develop an Angular application that fetches data from the backend and displays it on the front end, along with some predefined hard-coded data. The communication in my project happens between two files: client.service.ts import { Injectable } f ...

jsonangulartypescriptsubscriber

Having difficulty placing a marker on Google Maps

I am currently working on an application that relies on placing markers on a Google map. While the click event functions as expected when I test the code in Chrome, I am facing difficulties with recognizing the touch event on an Android device where I&apos ...

androidangularjscordovagoogle-maps-api-3google-maps-markers

I'm receiving the error message "app.get is not a function" when using Express.js. What could be

Having trouble understanding why I am getting an error: app.get is not a function in the upload.js file with the provided code snippet. In my index.js file, I have set up everything and exported my app using module.exports = app. I have also used app.set( ...

javascriptnode.jsexpressmodulerequire

The challenge of PHP's HTTP_REFERER

I am experiencing an issue with http_referer. In my setup, I have two files: index.php and index.html. The index.php file contains a form that, upon submission, includes information like the http_referer. On the other hand, the index.html file runs an aja ...

javascriptphphtmlajaxhttp-referer

Tips for containing a range slider within a div element in a flexbox container

I am currently using Javascript to generate a grid of images, and I want to include a range slider at the bottom of one of the images. Here is a simplified version of my code using flex-container: <style> .flex-container { display: flex; fle ...

javascripthtmlcssflexbox

Show the id value of the event triggered by eventclick

I am currently attempting to retrieve the id of the event so that I can remove it from the database. My approach involves using eventClick, where a dialog pops up when the user clicks an event prompting them to remove it. In order to proceed with this oper ...

javascriptreactjsfullcalendar

A guide on triggering a function when the context changes in a React application

Can I automatically trigger a function in a component whenever the context changes? Specifically, I have a variable named isLoggedIn in the Navbar module. Whenever a user logs in, the value of isLoggedIn is updated to true. In my Blog module, how can I m ...

javascriptreactjsstatereact-context

Initiate a POST ajax request to retrieve the file.Let's

I'm currently working on an Asp.Net MVC project and I have a piece of code in my View that looks like this: $.ajax({ beforeSend: function () { LoadStart(); }, complete: function () { LoadStop(); ...

javascriptc#ajaxasp.net-mvc

Tips for revealing a hidden div by clicking on another div?

I have a Google visualization chart inside a div tag. I would like to display this chart in a pop-up box when clicking on the chart's div. I am utilizing jQuery for this feature. ...

javascriptjqueryhtml

Using a JavaScript command, connect a function from one file to another file

I attempted to import a function because I want to click on <il> servies</il> and scroll to the services section on the home page. However, I simply want to click on the li element in the navbar and scroll to the service section on the home pag ...

javascriptreactjsnext.jserror-handlingscrollview

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

javascriptjqueryhtmlkeypresskeydown

Sorting price and date with Vue in Laravel - A beginner's guide

Attempting to sort by price and by date. See the code below. I decided not to use the controller for this sorting. Is it feasible to implement it here? It's somewhat functional, but there are some issues. When selecting price, it doesn't seem to ...

javascriptvue.jsvuejs2

Converting a string into a TypeScript class identifier

Currently, I am dynamically generating typescript code and facing an issue with quotes in my output: let data = { path: 'home', component: '${homeComponentName}', children:[] }; let homeComponentName = 'HomeComponent' ...

javascriptangularstringtypescript

How can I prevent the enter key from working with Twitter Typeahead?

Is there a way to prevent the enter key from being pressed on an element within Twitter Typeahead's dropdown feature while using Angular with Typescript? I attempted to utilize preventDefault() when event.keycode === 13 on the ng-keydown event for th ...

angularjsangulartypescriptangularjs-directivetwitter-typeahead

Styling elements conditionally with AngularJS-controlled CSS

Looking for some guidance in Angular as a newcomer. I am attempting to adjust a style when clicked. On my page, I have multiple content spaces created using the same template. Upon clicking a "more" link, I desire to expand that specific section. I have ac ...

javascriptjqueryhtmlcssangularjs

Presence detected: Discord bot appears online but is missing from members list

I am embarking on the journey of creating my first Discord bot. After installing NodeJS on my computer, I used the Discord developer tools to create the app, turned it into a bot, obtained the token, selected privileges, and added the bot to my server. I ...

javascriptnode.jsdiscordbots

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

javascriptcss

Ways to refresh the main frame

Here is an example of parent code: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Parent</title> </head> <body> <iframe src="https://dl.dropboxusercontent.com/u/4017788/Labs/child.html" width ...

javascriptjqueryhtmliframe

Instead of sending a post request, sending an options request after the ajax request is made

Currently, I am initiating a post ajax request: var responsehttpreq = {} function createAndSendXmlHttpReq(){ requestBody = { hostname: "prova", pathname: "prova", query: "prova", method: "prova" } console.log("F ...

javascriptnode.jsajax

Creating an interactive checkbox input field utilizing a JSON-driven database

Can someone assist me with creating dynamic checkboxes? I have JSON data structured as follows: [ { "categoryName": "Category 1", "items": [ { "value": "value1", "label": "label1" }, { "value": "value2" ...

javascriptarraysjsonreactjsnested-forms