CODEWITHSUNDEEP
reactjselectronelectron-builderspawn
takanoha
takanoha

Reputation: 353

SpawnSync doesn't work when using electron-builder

I am writing an react-electron application and I noticed that when I used electron-builder to build it the binary was stuck when calling "spawn".

With "yarn start" the application can be executed without problems. Only with electron-builder it gets stuck.

Can you help ?

Thanks,

Update

It seems that the C++ binary included as part of the program can't be executed within electron. If I give the hardcoded full path to the binary it works but if I give the path from __dirname I get an error

const GetLocalPath = () => {
  const path = __dirname + "/../cpp_program/"

  return {
    helloWorld: path+ "helloWorld",
    helloWorldRepeat: path+ "helloWorldRepeat"
  }
}

export function helloWorld(){
  // let dir = "/Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/cpp_program";
  let comm = GetLocalPath().helloWorld;

The error message

internal/child_process.js:403 Uncaught (in promise) Error: spawn ENOTDIR
    at ChildProcess.spawn (internal/child_process.js:403)
    at Object.spawn (child_process.js:562)
    at helloWorldRepeat (/Users/ricky/proje…ar/build/Lib.js:113)
    at Object.<anonymous> (/Users/ricky/proje…sar/build/Lib.js:49)
    at Generator.next (<anonymous>)
    at /Users/ricky/proje…asar/build/Lib.js:9
    at new Promise (<anonymous>)
    at __awaiter (/Users/ricky/proje…asar/build/Lib.js:5)
    at Object.handleInitialize (/Users/ricky/proje…sar/build/Lib.js:35)
    at TestStateMachine.transition (/Users/ricky/proje…tStateMachine.js:56)

This is pretty odd because it works just fine with "yarn start", which is "tsc && electron"

package.json is shown below

  "scripts": {
    "start": "tsc && electron ."
  },
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "files": [
      "build/**/*",
      "public/**/*",
      "src/images/**/*"
    ]
  },

Update ver 2

Per Alexander's suggestion I have included

"asar": false

inside package.json

When I excute it I get a different error

Uncaught Error: spawn /Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/dist/mac/MyApp.app/Contents/Resources/app/build/../cpp_program/helloWorldRepeat ENOENT
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269)
    at onErrorNT (internal/child_process.js:465)
    at processTicksAndRejections (internal/process/task_queues.js:80)
errnoException  @   internal/errors.js:510
ChildProcess._handle.onexit @   internal/child_process.js:269
onErrorNT   @   internal/child_process.js:465
processTicksAndRejections   @   internal/process/task_queues.js:80

Now the error is that there is no "helloWorldRepeat" file inside /Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/dist/mac/MyApp.app/Contents/Resources/app/build/../cpp_program/.

The binary is in fact located at

/Users/Rick/projects/lala/github/tutorial/electron-tutorial-app/build/../cpp_program/helloWorldRepeat

Do I have to manually create this folder and paste the binary files ?

Upvotes: 0

Views: 1560

Answers (1)

Alexander Leithner
Alexander Leithner

Reputation: 3442

By default, Electron Builder compiles your application and packs all resources into one large archive file (think of it as a ZIP file) which can be read just fine because Electron brings support for this format known as "ASAR".

When running the built program, the code will be read from the archive. This means that __dirname will point to a directory inside the archive. The operating system, however, cannot read from the archive. Since you did not actually include the piece of code calling child_process.spawn (), I can only speculate on why you get ENOTDIR, which hints that a given path is not a directory when it was expected to be one, but I assume this is because you point to a path inside the ASAR file.

When relying on external binaries, it is a good idea to keep them outside the ASAR archive and programmatically find the path to them (which is quite complex) or by preventing Electron Builder from compiling your app into an ASAR file. However, you would also have to ask Electron Builder to include the executable in the built version of your app. This can be done by modifying your package.json:

{
    ...
    "build": {
        "appId": "com.example.myapp",
        "productName": "MyApp",
        "files": [
            "build/**/*",
            "public/**/*",
            "src/images/**/*"
        ],
        "extraResources": [
            "cpp_program/*"
        ]
        "asar": false
    },
}

(Replace "cpp_program/*" by whatever path pattern matches your desired directory, possibly even replacing /* with /**/* if there are subdirectories.)

This way, the directory cpp_program will be copied to your app's resources directory upon build. This path, according to Electron Builder's documentation, is Contents/Resources/ on MacOS. Thus, you will have to modify your path (__dirname + "../" will not work because it will point to Contents/Resources/app, but __dirname + "../../" should; if not, experimenting will lead to the correct path)*. Remember to run Electron Builder every time your C++ executable changes, as the files in the .app folder are not linked to their counterparts outside the built app.

* You can switch between development paths (__dirname + "../") and production paths (__dirname + "../../" or whatever) by checking if __dirname.includes (".app/")

Upvotes: 3

Related Questions