"Require" exception in Cordova/phonegap project

Question

I am trying to build an hybrid mobile app using Phonegap/Cordova in Android platform. And I have succeeded in that too :) The app works as desired in Ripple emulator in my Chrome browser. I am not using Eclipe ADT or Android Studio as the emulator does not load quick.

I have used onDeviceReady event and Navigator plugin for vibrate and alerts. All these works fine as expected.

When the Developer Console is active in Chrome, the JavaScript breaks in cordova.js with the following error

Uncaught ReferenceError: require is not defined 

in the following line. The same happens for notification.js file too. When I press continue in debugger, everything works again as expected apart from that error.

var cordova_events = require('./src/events'),

Order of the java script files are as given below.

<script src="js/cordova.js"></script>
<script src="js/notification.js"></script>               
<script src="js/vibration.js"></script> 

I believe I am not referencing the correct cordova.js file and all other dependencies. But I also wonder how come does the app works fine in Ripple when the developer console is not active.

I even tried to remove cordova.js file as Ripple automatically includes it as per phonegap deviceready event - ripple emulator

I have the download copies of phonegap and cordova from their respective sites. I have installed Node.js and have installed the packages too.

My questions here are:

• Where to find the correct cordova.js file? Which is the correct version to be included in my html files project?
• What's the user of Node.js over here?
• Does it designed to automatically include the scripts based on Node.js? If so what I am missing?

I confess that the concept and usage of node.js looks like a rocket science for me.

Answer 1

Dont use the plugins *.js files out of the plugin source.

Dont add plugins *.js files as tags into your html
(Cordova loads them on its own based on cordova_plugins.js )

The specific error 'require is not defined' comes from missing cordova define in the plugins.js

cordova.define("org.apache.cordova.file.DirectoryEntry", function(require, exports, module) {

});

To avoid all of this trouble:

Use cordova command line interface to setup platforms and plugins. It manages all the native and javascript source files and puts them together in the proper way.

Answer 2

Cordova and Phonegap are pretty much the same thing, you shouldn't need to download both. Cordova is the open source project that helps you publish your HTML5 app to multiple different mobile OSes. Phonegap uses Cordova to do that, but also adds some extra features, mostly just being able to build in the cloud instead of on your workstation.

Node.js is used by Cordova for a lot of the building steps. Since Cordova works on OSX and Windows machines, we needed a way to write build and package scripts that would work on both operating systems - node.js provides this. When you build an application with Cordova you shouldn't really use node.js at all, unless you are also building a complementary backend system.

Starting with Cordova 3.x, there is a cordova command line tool that can greatly help you create the application. It takes care of copying the right cordova.js and cordova-android.jar files. You can read about it here http://cordova.apache.org/docs/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface

Once you get set up you might want to read my other answer that clarifies some of the use cases of cordova tool: Should a phonegap plugin be declared in the config.xml file?