Electron build not finding js functions pack

#1

Hi.

I’ve made some tests with electron (also with electron-packager which actually shows same results) with some large ionic apps we’ve created. Here’s more background for start:

  • we’re using generator-m to create new ionic/cordova apps.
  • after creating app, we use gulp build to pack all external JS libraries into single vendor.js and our local libraries (services, controllers etc from angular) into app.js. Everything gets saved into www/ directory. This is created with using gulp task
  • running the index.html in browser works as it should. console in browser doesn’t show any errors whatsoever.
  • now, I’ve created new Electron project in seperate directory, screenshot as reference:
  • main.js is exactly how it is on electron website with added www/ directory like this: mainWindow.loadUrl('file://' + __dirname + '/www/index.html');
  • package.json is just pure:
{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}
  • running electron . command opens Electron with my app, but here are the problems:

#Problem #1#
Uncaught Error: Cannot find module 'promise' (module.js:338) and I have no idea where that comes from? We’ve tried with npm install commands and what not, but we don’t have any modules directory, since everything is packed in app.js and vendor.js in the first place.

#Problem #2#
If you check screenshot#2 again, you will notice that I’ve manually included PouchDB libraries we’re using. Why is that? Because, if I don’t do that, I get an error that PouchDB is not found or defined. Once again, all these pouch and other libraries are merged in vendor.js as stated above. Adding files manually to index.html solves the problem.

But then, we got another bunch of errors for example: _ is not defined (lowdash lib).

So the question I am having is:

  • why cannot Electron use the vendor.js which is packed with all libraries?
  • why are then some libraries found from vendor.js and some not? (angular, ionic work, pouch, lowdash not- even though all of them are located in vendor.js)
  • should I really pack each and single library manually into index.html?

This is totally against idea and concept of how our apps are built, since every single browser supports and loads our app.js and vendor.js without any problem.

Please help me understand the problem and eventually finding the reason/solution to what is it actually happening.

Thank you and best regards :smile:

#2

Why are you concatenating your javascript in the first place? The files don’t have to go over the wire with Electron, so there’s no need to lower the number HTTP requests. It also increases the chances of JS being executed in the wrong order, which can be a possible cause of problem #2.

#3

Thank you @olmokramer for your reply. As you suggested, I’ve created new gulp task which does not concatenate any javascript libraries. Even though my app now works, developer console in Electron app shows two errors which I cannot resolve:

Uncaught Error: Cannot find module 'promise' (module.js:338) and
Uncaught Error: Cannot find module 'localForage' (module.js:338)

To be more specific, this module.js isn’t in my library. This usually refers to NodeJS and the node_modules directory. But, since this error isn’t showing up if we run it directly from Google Chrome or any other browser, I assume there has to be some other linking problem when building app with angular?

Update: I just found out, there’s actually a github post here (https://github.com/mozilla/localForage/issues/376) and it actually has to do something with localForage.js and electron. Read more about it over on the github post I’ve shared.

Thank you again for your help.

#4

It looks like you’re trying to do require('localForage');, but looking at its package.json, the package name is actually localforage (note the lowercase f), so try require('localforage') instead.

#5

Thank you again for your reply. Tried that also, with the same result.

#6

I don’t really have time to set up an electron app right now, but the following worked when I ran it inside Atom.

First I

  • mkdir /tmp/test && cd /tmp/test
  • npm install localforage

Then I opened Atom’s DevTools console and ran require('/tmp/test/node_modules/localforage') and it didn’t throw the error you’re describing.

After reading the github issue you linked to, I saw that you use bower to install localforage. Does bower actually install it to the node_modules directory? Because it’s not setup by default to do that. Node can only find modules if they are in the node_modules directory of your project.

#7

Hi and thank you again for replying @olmokramer. As you’ve found out and thankfully we also is that the latest commit from Mozilla’s localforage fixes the promise problem.

However, as stated, we still had a problem with localforage being not found. What we found out at the end is, that the angular-localForage that was handling localforage requests was not working.

Removing it completely from project and using latest #master from mozilla fixed the problems we’re having and we’re now using localforage commands directly without using angular-localForage ‘wrapper’ as you can see on the github Issue I’ve posted above.

Thank you for helping and best regards :smile: