Electron-builder: Error: Cannot find module ... app.asar/index.js

[skotturi]

Successfully built my angular1 app as an electron app. I can run it using electron-prebuilt, however, when I launch the installed dmg, the app fails immediately.

Image contains error message:

my dev-level package.json:

{
    "name": "activity-frontend",
    "version": "1.1.1",
    "author": "Sante Kotturi",
    "description": "activity-frontend: An Ionic project",
    "dependencies": {
        "gulp": "^3.5.6",
        "gulp-concat": "^2.2.0",
        "gulp-minify-css": "^0.3.0",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^2.0.4"
    },
    "devDependencies": {
        "bower": "^1.3.3",
        "electron-builder": "^3.5.0",
        "electron-prebuilt": "^0.37.5",
        "gulp-util": "^2.2.14",
        "shelljs": "^0.3.0"
    },
    "scripts": {
        "electron": "electron www",
        "postinstall": "install-app-deps",
        "pack": "build",
        "dist": "build"
    },
    "build": {
        "osx": {
            "contents": [
                {
                    "x": 410,
                    "y": 220,
                    "type": "link",
                    "path": "/Applications"
                },
                {
                    "x": 130,
                    "y": 220,
                    "type": "file"
                }
            ]
        }
    }
}

my app-level package.json which specifies a main.js:

{
  "name"    : "activity-uploader",
  "version" : "0.0.1",
  "main"    : "main.js"
}

my main.js just in case it helps: [EDIT with correct main.js]

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.

// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is GCed.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 700});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
});

I launched Mac Finder > my app > Contents > Resources
to see if app.asar was an inspectable but its a binary file:
app.asar: application/octet-stream; charset=binary

Any help or pointing in the right directions of resources is much appreciated.

[develar]

Try to set path as "main" : "./main.js"

[skotturi]

@develar I've tried this, rebuilt and reinstalled the dmg but getting the same error. I'm not using any es6 or module system in my project, maybe that has something to do with it?

[develar]

Wel... To ensure that it is not an asar issue, set build.asar: false (dev-level package.json in the existing build: asar: false)

[skotturi]

@develar [Edit, wrong mention]
instead of Resources/app.asar/index.js, its now Resources/app/index.js

[develar]

@skotturi Please check Resources/app/package.json — is it your app package.json?

[skotturi]

@develar no, its my dev package.json! how can I fix this?

activity-frontend $ cat /Applications/activity-frontend.app/Contents/Resources/app/package.json
{
    "name": "activity-frontend",
    "version": "1.1.1",
    "author": "Sante Kotturi",
    "description": "activity-frontend: An Ionic project",
    "dependencies": {
        "gulp": "^3.5.6",
        "gulp-concat": "^2.2.0",
        "gulp-minify-css": "^0.3.0",
        "gulp-rename": "^1.2.0",
        "gulp-sass": "^2.0.4"
    },
    "devDependencies": {
        "bower": "^1.3.3",
        "electron-builder": "^3.5.0",
        "electron-prebuilt": "^0.37.5",
        "gulp-util": "^2.2.14",
        "shelljs": "^0.3.0"
    },
    "scripts": {
        "electron": "electron www",
        "postinstall": "install-app-deps",
        "pack": "build",
        "dist": "build"
    },
    "build": {
        "asar": false,
        "osx": {
            "contents": [
                {
                    "x": 410,
                    "y": 220,
                    "type": "link",
                    "path": "/Applications"
                },
                {
                    "x": 130,
                    "y": 220,
                    "type": "file"
                }
            ]
        }
    }
}

[skotturi]

SOLVED!

My app files were in www instead of app.

mv www app
rm -rf dist
npm run dist

Maybe there should have been an error or warning thrown when build didnt find an app folder? To avoid the rather stupid mistake that I have committed..

I was seeing the following when building with a www folder:

Skipping app dependencies installation because dev and app dependencies are not separated
Packaging app for platform darwin x64 using electron v0.37.5
Signing app
Creating DMG
Creating ZIP for Squirrel.Mac

The Skipping app... should have raised a flag (both digitally and mentally) that something with my proj structure was off.

Anyway thanks @develar for the patience and helping debug!

[skotturi]

A further note, I think that because when running electron-prebuilt, I was able to specify the app directory (in my case it was www):

package.json:

...
 "scripts": {
        "electron": "electron www",       <<<---- THIS
        "postinstall": "install-app-deps",
        "pack": "build",
        "dist": "build"
    }
...

I was able to get things running locally with www and didnt think to switch to app.

[develar]

I was able to specify the app directory (in my case it was www):

You can specify app dir:

develar-work:onshape-desktop-shell develar$ ./node_modules/.bin/build --help

electron-builder 3.2.0

Options

  --appDir string        Relative (to the working directory) path to the folder containing the         
                         application package.json. Working directory or app/ by default. 

[develar]

ToDo:

• appDir should be specified in the dev package.json build. And documented.
• CLI param should be deprecated.
• we should check that app contains valid package.json WHAT? Yes — our goal to not stupidly pack, but a smart tool. So, we _must_ add this check to prevent runtime errors and help users.
• we already detect app as an app dir without configuration. we should detect www as well.

@skotturi Please explain why www is used as an app dir? Just to be sure that it is a common practice (you are not first who use www :) instead of app).

[skotturi]

@develar

@skotturi Please explain why www is used as an app dir? Just to be sure that it is a common practice (you are not first who use www :) instead of app).

I was using www instead of app because that is the default file structure used by Ionic. Ionic uses it because that is what cordova looks for when building a webapp into a hybrid app for ios and android.

[demetris-manikas]

@develar looks like only the checking of the package.json is now left to be done. Are you on to it?

[develar]

Are you on to it?

No. If you want — please help.

[demetris-manikas]

Can you outline the checking process? Or should I come up with a proposition first?

[demetris-manikas]

@develar does it sound reasonable to run code similar to the assertPack to test the validity of the application package.json?

[develar]

@demetris-manikas Yes. We should check:

• if no main in the package.json — index.js must exists (be aware about asar).
• if main specified, such file must exists.

[demetris-manikas]

I see. I 'll give it a try.

[PierBover]

I was having the "index.js" in the "app.asar" does not exist. Seems like a wrong configuration. error because my electron app is not in an app folder. So I added this to the package.json of the main repo (not the one of the app).

"directories": {
    "app": "./electron/"
}

Hope it helps someone.

[juanpmarengo]

Sorry I'm a little bit lost, I have a similar project, where I have a webpage generate with Jhipster. In the project directory I'm doing a gulp build which generates a build directory.

awesomeProject
├── build
│ ├── www
│ │ ├── index.js
│ │ └── [...]
│ └── […]
├── electron
│ ├── package.json
│ └── index.js
├── src
│ └── […]
├── package.json
└── [...]

I have another folder with the electron configuration, with the index.js pointing to build/www/index.js. When I package the electron app, the build directory is missing, if I manually copy inside resources it works. Is there an elegant solution instead of manually copying the directory?

[roystijsiger]

I have an issue similar to this... Exact same error. But then you said:
"Wel... To ensure that it is not an asar issue, set build.asar: false (dev-level package.json in the existing build: asar: false)"

I tried setting asar to false and suddenly it work when i unpack my asar file i can find the location... But i still get the can not find script file error.. wtf..