Phonegap 7 is messing with package.json

Question

I'm trying to upgrade my phonegap/cordova android application which is build with react and webpack to its latest version 7.0.1

When I execute phonegap build android one of the new things phonegap is doing is to automatically update the package.json with all the dependencies of my cordova plugins into the file and additionally to add a section with regards cordova, check the below snippet:

After running phonegap build, I see within package.json:

"dependencies": {            
        // my normal dependencies
        ...
        "counterpart": "0.18.2",
        "react": "15.6.1",
        ...

        // added by phonegap    
        "cordova-android": "^6.2.3",
        "cordova-plugin-battery-status": "~1.1.1",
        "cordova-plugin-camera": "~2.1.1",
        "cordova-plugin-console": "~1.0.2",
        "cordova-plugin-contacts": "~2.0.1",
        "cordova-plugin-crosswalk-webview": "^2.3.0",
        "cordova-plugin-customurlscheme": "~4.3.0",
        "cordova-plugin-device": "~1.1.2",
        "cordova-plugin-device-motion": "~1.2.0",
        "cordova-plugin-device-orientation": "^1.0.7",
        "cordova-plugin-dialogs": "~1.2.0",
        "cordova-plugin-file": "~4.1.1",
        "cordova-plugin-file-transfer": "~1.5.0",
        "cordova-plugin-geolocation": "~2.2.0",
        "cordova-plugin-globalization": "~1.0.3",
        "cordova-plugin-inappbrowser": "~1.3.0",
        "cordova-plugin-media": "~2.2.0",
        "cordova-plugin-media-capture": "~1.2.0",
        "cordova-plugin-network-information": "~1.2.1",
        "cordova-plugin-screen-orientation": "^2.0.1",
        "cordova-plugin-screensize": "1.3.1",
        "cordova-plugin-splashscreen": "~3.2.1",
        "cordova-plugin-statusbar": "~2.1.3",
        "cordova-plugin-vibration": "~2.1.5",
        "cordova-plugin-whitelist": "~1.2.2"
    },
    "cordova": {
    "platforms": [
        "android"
    ],
    "plugins": {
        "cordova-plugin-battery-status": {},
        "cordova-plugin-camera": {},
        "cordova-plugin-console": {},
        "cordova-plugin-contacts": {},
        "cordova-plugin-crosswalk-webview": {},
        "cordova-plugin-customurlscheme": {
            "URL_SCHEME": "essforms",
            "ANDROID_SCHEME": " ",
            "ANDROID_HOST": " ",
            "ANDROID_PATHPREFIX": "/"
        },
        "cordova-plugin-device": {},
        "cordova-plugin-device-motion": {},
        "cordova-plugin-device-orientation": {},
        "cordova-plugin-dialogs": {},
        "cordova-plugin-file": {},
        "cordova-plugin-file-transfer": {},
        "cordova-plugin-geolocation": {},
        "cordova-plugin-globalization": {},
        "cordova-plugin-inappbrowser": {},
        "cordova-plugin-media": {},
        "cordova-plugin-media-capture": {},
        "cordova-plugin-network-information": {},
        "cordova-plugin-screen-orientation": {},
        "cordova-plugin-screensize": {},
        "cordova-plugin-splashscreen": {},
        "cordova-plugin-statusbar": {},
        "cordova-plugin-vibration": {},
        "cordova-plugin-whitelist": {}
    }
}

This is somewhat explained in the new version of phonegap 7+ here

My problem is that when this happens I can no longer build my application or start it as standalone with npm start since some of the dependencies are creating the following error:

WARNING in ./node_modules/cordova-android/bin/templates/cordova/Api.js
118:30-79 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/cordova-android/bin/templates/cordova/Api.js
152:30-79 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/cordova-android/bin/lib/create.js
Module parse failed: /storage/projects/exus/inachus/source/ess-forms-android/node_modules/cordova-android/bin/lib/create.js Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
| #!/usr/bin/env node
| 

How it is possible to overcome this issue? Can I add some configuration to prevent this from happening?

Answer 1

I have found a workaround to overcome this since it seems that we have to manually exclude the packages of cordova when building your react application, you can do the following (I dont know if there is any better solution to this):

...

function removeMatching(originalArray, regex) {
    var j = 0;
    while (j < originalArray.length) {
        if (regex.test(originalArray[j]))
            originalArray.splice(j, 1);
        else
            j++;
    }
    return originalArray;
}

module.exports = {
    entry: {
        vendor: removeMatching(Object.keys(require('./package.json').dependencies), /cordova-.*/)
    },

 ...

When you declare your entries make sure to exclude the cordova dependencies