Cordova plugins undefined

Question

I am trying to use the ZeroConf plugin for Cordova. I never used any Cordova plugin before.

These are the steps I did :

cordova create myApp
cordova platform add android
cordova platform add ios
cordova platform add browser
cordova plugins add https://github.com/cambiocreative/cordova-plugin-zeroconf

Afterwards, I changed the default onDeviceReady function so that "index.js" file (in the myApp/www/ directory) looks as follow :

var app = {
    ...

    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        if(cordova && cordova.plugins) {
            console.log('cordova.plugins is available');
        } else {
            console.log('cordova.plugins NOT available');
        }
    },

    ...
};

app.initialize();

Unfortunately it always logs "cordova.plugins NOT available". I first checked if cordova exists and it does, however, cordova.plugins is undefined. Note that i'm testing this in the browser (cordova run browser) to find the problem, once cordova.plugins won't be undefined anymore I will be able to use the ZeroConf plugin.

I searched for hours, read a lot of similar topics but none could help for me.

What I tried :

• cordova plugin ls --> ZeroConf plugin is present com.cambiocreative.cordova.plugin.zeroconf 1.0.9 "Cordova ZeroConf Plugin"

• Verified that index.html loads the cordova.js script

• I edited the config.xml file (in myApp/www/config.xml) and added <plugin name="com.cambiocreative.cordova.plugin.zeroconf" version="1" /> , but that did not helped. Also tried <feature name="ZeroConf"><param name="android-package" value="com.cambiocreative.cordova.plugin.ZeroConf" /><param name="onload" value="true" /></feature> without success.

This is the order in which i include the scripts in index.html (in myApp/www/index.html) :

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

EDIT : I tried accessing the ZeroConf object directly from the "zeroconf.js" file, without success.

I edited onDeviceReady function :

onDeviceReady: function() {
    app.receivedEvent('deviceready');

    var el = document.getElementById("zcOK");

    if(typeof ZeroConf !== 'undefined') {
        el.innerHTML = "ZEROCONF READY";
    } else {
        el.innerHTML = "ZEROCONF NOT READY";
    } 
}

But this displays "ZEROCONF NOT READY"...

This is how my index now look like (i only added a paragraph with id="zcOK" to display the above).

<p id="zcOK">ZeroConf test</p>
<!-- ORDER IN WHICH THE SCRIPTS ARE LOADED -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="../plugins/com.cambiocreative.cordova.plugin.zeroconf/www/zeroconf.js"></script>
<script type="text/javascript" src="js/index.js"></script> <!-- Contains the onDeviceReady function -->

However, now I don't know if "ZeroConf" is undefined because there is some problem with the plugin or because it would not be accessible from within "index.js" because it was included in "index.html" ?

Answer 1

Examining the config.xml and the JS file of cordova-plugin-zeroconf I found this declaration:

<js-module src="www/zeroconf.js" name="ZeroConf">
    <clobbers target="cambiocreative.CDVZeroConfig" />
</js-module>

So the plugin API should be available at this name space: cambiocreative.CDVZeroConfig

In fact as of Cordova Plugins documentation:

... tags are allowed within <js-module>:

<clobbers target="some.value"/> indicates that the module.exports is inserted into the window object as window.some.value. You can have as many <clobbers> as you like. Any object not available on window is created. ...