Browserify error "require is not defined"


#1

My index.html file:

<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->

<!-- ionic/angularjs js -->

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
Then I add this line to my app.js file > .constant('Crypto',require('crypto'))

I ran cmd command “browserify app.js -o bundle.js”, it generate this file perfectly, with code for Crypto module. But when I run command “ionic serve”, it still got error “require is not defined”.
How can I fix it? Thanks!


Using a NPM module in my ionic framework app
#2

you need to include the bundle.js in your index.html instead of the app.js.

now you are creating a bundle with the solved require-statement, but never using it.


#4

Ok I removed and it work :smiley:.
Thanks!
But I have another question.
Here my service file:

angular.module(‘loyaltyportalapp.services’,[]).factory(‘Json’,[’$http’,‘Crypto’,function($http,Crypto){
return {
getAllProduct:function(){
console.log(Crypto.SHA256(“Message”));
return $http.get(‘myserver.com’,{
});
}
}
}]);

I tried to test the Crypto constant which I defined in app.js file. But I cannot call it. I got message Crypto.SHA256 is not a function. So how can I use this constant?
Thanks!


#5

i do not know many things about crypto, but this is not an angularjs modules?

So you can not load it via dependency injection.


#6

Hi chuotcong! I’m having the same trouble you have got. Could yuo please clarify better what do you remove ?

I follow the steps in browserify doc that are the same you did :

  1. .constant(‘Crypto’,require(‘crypto’))
  2. bundle.js creation with browserify main.js -o bundle.js
  3. bundle js import in index.html

but still require is not defined.

Please help!.

Thanks very much in advance


#7

Hi!
Have you fixed?
I think better you give me your email. Then I will send you my project, so that you can follow. I finished it for a long time, and don’t remember how to fix :D.


#8

Hi Chuotcong it’s me again sorry. No idea if my reply is arrived (with email address). Anyway, any hints/suggestions should be really appreciated to resolve the unresolved issue. Thanks again.


#9

Finally worked! :sunny:

I try to detail more chuotcong answer :slight_smile:

  1. browserify app.js -o bundle_app.js generate the bundle_app.js file that wrap all the app.js content

  2. remove the old app.js inclusion in index.html file

  3. add the bundle_app.js inclusion in index.html file

Now require command should work properly .


#10

i dont have a controller.js or service.js and when I remove the app.js from the index my whole app stops working. I get this:

Uncaught Error: [$injector:modulerr] Failed to instantiate module ionicApp due to: Error: [$injector:nomod] Module 'ionicApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.