no suitable image found on macOS

[phhoef]

Summary of Problem

When creating an installer with electron-builder an error occurs when launching the application.
The behaviour is quite odd. Running the app for development (electron . & webpack --mode development) everything is working fine. Then, I package the app with electron-builder. The packaged app won't start and closes immediately. When I then run the app for development again, the same error occurs. The only way to get the app working in dev again is to delete the node_modules folder and run yarn install again.
With yarn install the script electron-rebuild is also executed.

Here is the thrown exception:

App threw an error during load
Error: dlopen(/Client/node_modules/@serialport/bindings/build/Release/bindings.node, 1): no suitable image found.  Did find:
        /Client/node_modules/@serialport/bindings/build/Release/bindings.node: unknown file type, first eight bytes: 0x4D 0x5A 0x90 0x00 0x03 0x00 0x00 0x00
        /Client/node_modules/@serialport/bindings/build/Release/bindings.node: unknown file type, first eight bytes: 0x4D 0x5A 0x90 0x00 0x03 0x00 0x00 0x00
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:160:31)
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:722:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:160:31)
    at Module.load (internal/modules/cjs/loader.js:602:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:541:12)
    at Function.Module._load (internal/modules/cjs/loader.js:533:3)
    at Module.require (internal/modules/cjs/loader.js:640:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at bindings (/Client/node_modules/bindings/bindings.js:84:48)
    at Object.<anonymous> (/Client/node_modules/@serialport/bindings/lib/darwin.js:1:191)

I saw a few similiar issues here, but from my point of view all of them doesn't exactly match to my problem. I am quite new to Electron, so sorry if it's obvious for everyone but me.

Versions, Operating System and Hardware

• SerialPort@? 7.1.1
• Node.js v? 11.6.0
• Windows? Linux? Mac? macOS HighSierra 10.13.6
• Yarn: 1.12.3
• Webpack 4.28.2
• Electron 4.0.0

[HipsterBrown]

@phhoef Can you try building with serialport@7.1.0 to see if this is the cause of a regression? We have a patch in the works, but it will be good to confirm for this case as well.

[phhoef]

@HipsterBrown thanks for your answer.
I changed version of serialport to 7.1.0 and issued yarn install.

Then I packaged the app and tried to open it.
The app still closes immediately. The running npm-run-all --parallel bundle serve brings the following error:

$ npm-run-all --parallel bundle serve
warning package.json: No license field
warning package.json: No license field
$ webpack --mode development
$ electron .
dyld: lazy symbol binding failed: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorE
  Referenced from: /Client/node_modules/@serialport/bindings/build/Release/bindings.node
  Expected in: flat namespace

dyld: Symbol not found: __ZN2v816FunctionTemplate3NewEPNS_7IsolateEPFvRKNS_20FunctionCallbackInfoINS_5ValueEEEENS_5LocalIS4_EENSA_INS_9SignatureEEEiNS_19ConstructorBehaviorE
  Referenced from: /Client/node_modules/@serialport/bindings/build/Release/bindings.node
  Expected in: flat namespace

Actually, I saw this error also a few times when using serialporty@7.1.1.

[HipsterBrown]

Thanks for checking. It appears to be an issue with mixing webpack and the electron bundling. Do you know if webpack is trying to bundling serialport as well? As far as I know, webpack cannot bundling native dependencies, so that may be causing the issue.

[phhoef]

Honestly, I have no idea. I am really a novice with Node.js/Electron and especially with all the packaging stuff.

I think all node_modules are excluded by the webpack.config.
Here is the first rule:

            {
                test: /\.(jsx|js)$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules'),
                options: {
                    presets: ['@babel/preset-react'],
                    plugins: ['transform-class-properties', '@babel/plugin-proposal-class-properties']
                }
            },

Is there a difference between running the app in dev mode or packaging for production?

[HipsterBrown]

Hmm ok. Do you know if this works for electron 3.0.0? We don't have prebuilt binaries for electron 4.0.0 since it was recently released, but the 3.0.0 prebuilt ones may be easier for packaging.

[HipsterBrown]

@phhoef Have you tried the electron-builder install-app-deps command as mentioned here? -> https://webpack.electron.build/dependency-management

[phhoef]

I haven't tested packaging the app with electron 3.0.0.
I started development with Electron 3, but switched to Electron 4.0.0 after release.
Now, I want to start beta testing with the users and that's why I tried packing the app for the first time.

I am getting confused by all the commands.
Could you please clarify the difference between yarn build and electron-builder build --publish never.
Sorry, I know this is not related to serialport itself.
As far as I understand, yarn build is actually building the app and also creates a macOS app bundle (.app), right?
The electron-builder just puts the compiled app into the distribution package (e.g. dmg for mac).

I found out, that when issuing the following commands one by one manually, the app will start.

yarn build
$(npm bin)/electron-builder install-app-deps
$(npm bin)/electron-builder build --publish never

The package script actually executes the following "package": "yarn build && electron-builder build --publish never".
Then, I thought, adding the electron-builder install-app-deps would be a good idea.
The new script looks like this "package": "yarn build && electron-builder install-app-deps && electron-builder build --publish never"
But running the new script with yarn package does not work.
The same error occurs. I do not understand why.
The only obvious thing, that changed, is that I do not have the $(npm bin) prefix. But as far as I understand this is not needed.
But this has to be the important change. When executing all three commands manually in a row, it is working - even the app bundle in the dmg.

Hmm, that is driving me nuts.
I tried the complete procedure again to verify it, but now it does not work anymore.
That is weird and I do not understand this behaviour. I hope I do not confuse you, too :-)

[HipsterBrown]

Do you have an example repo I could look at? I will need to see the package.json to see what yarn build is doing. Many of your questions are related to packaging electron applications, which I don't have any experience with, so I'll help however I am able. Otherwise, I would look for more help from the electron-builder community.

[phhoef]

I also think that the problem is not directly related to serialport but with the packaging.
I've created an issue in the electron-builder repository, too: electron-userland/electron-builder#3590
So, @HipsterBrown thank you very much for your help.

I have created a small app to reproduce the issue.
I hope you can get some insights ...
https://github.com/phhoef/serialport-test

[HipsterBrown]

@phhoef Ok, thanks for creating a test repo. I'm closing this issue for now but will look into your repo to see if I can help at all.

[shuihuasheng]

i have a same issue

{

"keywords": [
"angular",
"angular 6",
"electron",
"typescript",
"sass",
"less",
"ng-zorro"
],
"main": "main.js",
"private": true,
"scripts": {
"postinstall": "npm run postinstall:electron && npx electron-builder install-app-deps",
"postinstall:web": "node postinstall-web",
"postinstall:electron": "node postinstall",
"ng": "ng",
"start": "npm run postinstall:electron && npm-run-all -p ng:serve electron:serve",
"build": "npm run postinstall:electron && npm run electron:serve-tsc && ng build",
"build:dev": "npm run build -- -c dev",
"build:prod": "npm run build -- -c production",
"ng:serve": "ng serve",
"ng:serve:web": "npm run postinstall:web && ng serve -o",
"electron:serve-tsc": "tsc -p tsconfig-serve.json",
"electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
"electron:local": "npm run build:prod && electron .",
"electron:linux": "npm run build:prod && npx electron-builder build --linux",
"electron:windows": "npm run build:prod && npx electron-builder build --windows",
"electron:zhizhongbao": "npm run build:dev && npx electron-builder build --windows",
"electron:mac": "npm run build:prod && npx electron-builder build --mac",
"test": "npm run postinstall:web && ng test",
"e2e": "npm run postinstall:web && ng e2e"
},
"dependencies": {
"@swimlane/dragula": "^3.7.3",
"@swimlane/ngx-dnd": "^6.0.0",
"@types/dragula": "^2.1.34",
"angularx-qrcode": "^1.2.4",
"canvas-resize": "^1.1.0",
"electron-updater": "3.0.3",
"escpos": "^2.4.10",
"less": "^2.7.3",
"machine-uuid": "^1.2.0",
"mqtt": "^2.18.8",
"ng-zorro-antd": "^1.8.0",
"ngx-clipboard": "^11.1.9",
"nodemailer": "^4.0.1",
"usb": "^1.5.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.6.3",
"@angular/animations": "6.1.0",
"@angular/cli": "6.1.2",
"@angular/common": "6.1.2",
"@angular/compiler": "6.1.2",
"@angular/compiler-cli": "6.1.2",
"@angular/core": "6.1.2",
"@angular/forms": "6.1.2",
"@angular/http": "6.1.2",
"@angular/language-service": "6.1.2",
"@angular/platform-browser": "6.1.2",
"@angular/platform-browser-dynamic": "6.1.2",
"@angular/router": "6.1.2",
"@ngx-translate/core": "10.0.1",
"@ngx-translate/http-loader": "3.0.1",
"@types/jasmine": "2.8.7",
"@types/jasminewd2": "2.0.3",
"@types/node": "8.9.4",
"codelyzer": "4.2.1",
"core-js": "2.5.6",
"electron": "2.0.7",
"electron-builder": "20.28.1",
"electron-reload": "1.2.2",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.2",
"karma-chrome-launcher": "2.2.0",
"karma-coverage-istanbul-reporter": "2.0.0",
"karma-jasmine": "1.1.2",
"karma-jasmine-html-reporter": "1.1.0",
"npm-run-all": "4.1.3",
"npx": "10.2.0",
"protractor": "5.3.2",
"rxjs": "6.2.2",
"ts-node": "6.0.3",
"tslint": "5.10.0",
"typescript": "2.7.2",
"wait-on": "2.1.0",
"webdriver-manager": "12.0.6",
"zone.js": "0.8.26"
}
}

[HipsterBrown]

@shuihuasheng Did you see the solution in the linked electron-builder issue -> electron-userland/electron-builder#3590 (comment)