Angular + Electron - Cannot find module main.js

Question

I am trying to build macOs app using electron by running electron-packager . --platform=darwin

It creates an app but when i run it gives me following error

Uncaught Exception:
Error: Cannot find module '/Users/msaadbashir/Downloads/Angular/accounting/accounting-darwin-x64/accounting.app/Contents/Resources/app/main.js'
    at Module._resolveFilename (internal/modules/cjs/loader.js:797:17)
    at Function../lib/common/reset-search-paths.ts.Module._resolveFilename (electron/js2c/browser_init.js:7736:16)
    at Object.<anonymous> (electron/js2c/browser_init.js:6116:37)
    at Object../lib/browser/init.ts (electron/js2c/browser_init.js:6124:30)
    at __webpack_require__ (electron/js2c/browser_init.js:20:30)
    at electron/js2c/browser_init.js:84:18
    at electron/js2c/browser_init.js:87:10
    at NativeModule.compile (internal/bootstrap/loaders.js:287:5)
    at NativeModule.compileForPublicLoader (internal/bootstrap/loaders.js:222:8)
    at loadNativeModule (internal/modules/cjs/helpers.js:23:9)

I have done the following apart from installing electron.

index.html <base href="./">

main.js

const { app, BrowserWindow } = require('electron')
let win;
function createWindow() {
    win = new BrowserWindow({
        width: 600,
        height: 600,
        backgroundColor: '#ffffff', 
    })
    win.loadFile('./dist/accounting/index.html')
    win.on('closed',function() {
        win = null
    })
}
app.on('ready',createWindow)
app.on('window-all-closed',function() {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate',function() {
    if (win === null) {
        createWindow()
    }
})

package.json

{
  "name": "accounting",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "electron": "electron .",
    "electron-build": "ng build --prod"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.6",
    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.0.6",
    "@angular/compiler": "~9.0.6",
    "@angular/core": "~9.0.6",
    "@angular/forms": "~9.0.6",
    "@angular/localize": "~9.0.6",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.0.6",
    "@angular/platform-browser-dynamic": "~9.0.6",
    "@angular/router": "~9.0.6",
    "@ng-bootstrap/ng-bootstrap": "^6.1.0",
    "@ng-select/ng-select": "^4.0.0",
    "@ngx-loading-bar/core": "^4.2.0",
    "@ngx-loading-bar/http-client": "^4.2.0",
    "@ngx-loading-bar/router": "^4.2.0",
    "bootstrap": "^4.5.0",
    "e-ngx-print": "^5.3.1",
    "html2canvas": "^1.0.0-rc.5",
    "html2pdf.js": "^0.9.2",
    "jquery": "^3.5.1",
    "jspdf": "^1.5.3",
    "ng2-date-picker": "^9.0.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-infinite-scroll": "^9.0.0",
    "ngx-mask": "^9.0.2",
    "ngx-toastr": "^12.0.1",
    "rxjs": "^6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.6",
    "@angular/cli": "~9.0.6",
    "@angular/compiler-cli": "~9.0.6",
    "@angular/language-service": "~9.0.6",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "electron": "^9.0.0",
    "electron-packager": "^14.2.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5"
  }
}

vadimk7 · Accepted Answer · 2020-05-30 10:34:49Z

4

You need:

set base-href to the root folder npm run electron-build -- --base-href ./
be sure the main.js in the root
be sure that in package.json main field refers to correct path of main.js

edited May 30, 2020 at 10:34

answered May 30, 2020 at 8:22

vadimk7

8,4071 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Saad Bashir Over a year ago

Firstly isn't defining it in index.html the same? Secondly, I did run the command it completes without any error. But nothing happens, as in no window or anything has popped up assuming it was supposed to. It only created the files in dist folder.

vadimk7 Over a year ago

Yes, it's the same. But by npm script you can define the root of your app including main.js while in index.html you can't. If you run by npm run electron is everything ok?

Saad Bashir Over a year ago

Unable to find Electron app at /Users/msaadbashir/Downloads/Angular/accounting Cannot find module '/Users/msaadbashir/Downloads/Angular/accounting/main.js'. Please verify that the package.json has a valid "main" entry. The main.js is currently in src folder

vadimk7 Over a year ago

try "main": "src/main.js" in package.json or move main.js to the root folder

Saad Bashir Over a year ago

yes moved it to root folder and npm run electron worked. And built the package. It is working there too. Could you please reflect this in your answer so I can accept your answer. I am extremely grateful to you for your kind assistance.

Collectives™ on Stack Overflow

Angular + Electron - Cannot find module main.js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related