Ways to integrate npm dependencies into your Cordova plugin

Question

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.

javascript cordova typescript node-modules apache-cordova

Answer 1

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.

Answer 2

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.

Ways to integrate npm dependencies into your Cordova plugin

Answer №1

Similar questions

What is the best way to implement an Angular Guard that utilizes an API service for validation and redirects in case of failure?

Repeat the most recent AJAX request executed

Ways to retrieve the quantity of a particular value within an object using TypeScript

What is the most effective way to load data prior to the controller being loaded

Learn how to trigger an event or API call in Angular 8 when the browser is closed with the help of HostListener

Using event.target to pass HTML form data to FormData is causing an error stating that the Argument of type 'EventTarget' cannot be assigned to a parameter of type 'HTMLFormElement'

Using Javascript to extract elements from JSON objects

Persist state in Vue by using the `vue-persistedstate` reducer

How to properly display an Angular Template expression in an Angular HTML Component Template without any issues?

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

Determining When the Collapse Transition in Material UI 5 is Complete

Utilizing ng-repeat in a tabset to create an interactive and customizable tab interface

Only displaying sub items upon clicking the parent item in VueJS

Exploring nested objects within an instance

What is the solution for resolving the JavaScript error "TypeError: Cannot read property 'map' of undefined"?

Adding middleware to the res.render() function can be extremely helpful when dealing with a large number

The build error TS1036 is thrown when a function with a return statement is moved to index.d.ts, even though it worked perfectly in a standard TS file

What is the best way to gather Data URI content through dropzone.js?

Error during compilation in npm (symbol '_' is not recognized)