JS error when executing electron app with native module on other computer

Question

I am using opencv4nodejs (a native module) in my electron app.

When I package my app and try to run it on another computer I am getting following error:

A JavaScript error occurred in the main process
Uncaught Exception:
Error: dlopen(/var/folders/7m/klqbsvis2iqg_mb_pdvv79fhO000gn/
T/.app.repeato.uuz70R, 1): Library not loaded: @rpath/
libopency_core.3.4.dylib
 Referenced from: /var/folders/7m/kiqbsvis2iqg_mb_pdvv79fhOG00gn/
Tf.app.repeato.uuz70R
 Reason: image not found
  at process.module.(anonymous function) (as dlopen} (ELECTRON_ASAR.js:166:20)
  at Object.Module._extensions..node (internal/modules/cjsfosder.js:740:18)
  at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:180:18)
  at Module.load (internal{modules/cjsfoader.js:620:32)
  at tryModuleLoad (internal/modules/cjs/loader.js:559:12)
  at Function.Madule._load {internal/modules/cjs/loader.js:551:3)
  at Module.require (internal/modules/cjs/loader.js:658:17)
  at require (internal/modules/cjs/helpers.js:20:18)
  at Object.<anonymous> (/Applications/Repeato.app/Contents/Resources/app.asar/node_modules/opencv4nodejs/lib/cv.js:17:8)
  at Object.<anonymous> (/Applications/Repeato.app/Contents/Resources/app.asar/node_modules/opencv4nodejs/lib/cv.js:28:3)

Any ideas what's wrong? I found a very similar issue on github, but not sure if it really is

EDIT

I am building with electron-builder and building with the command npm run dist. Here is my package.json:

{
  "name": "Repeato",
  "description": "...",
  "version": "1.0.0",
  "author": {
    "name": "...",
    "email": "..."
  },
  "repository": {
    "type": "git",
    "url": "..."
  },
  "build": {
    "appId": "app.myapp",
    "productName": "Repeato",
    "mac": {
      "category": "public.app-category.developer-tools"
    },
    "files": [
      "!minicap/*",
      "!minitouch/*"
    ],
    "extraResources": [
      "minicap/**",
      "minitouch/**"
    ],
    "directories": {}
  },
  "scripts": {
    "electron-rebuild": "electron-rebuild -w opencv4nodejs",
    "clean": "rm -rf node_modules",
    "reinstall": "npm run clean && npm install",
    "start": "concurrently \"npm run start-dev\" \"npm run start-electron\"",
    "start-dev": "cross-env NODE_ENV=development webpack-dev-server",
    "start-electron": "cross-env NODE_ENV=development electron index",
    "build": "npm run dist && npm run build-all",
    "bundle": "cross-env NODE_ENV=production webpack  --config webpack.production.config.js",
    "build-all": "build -lmw",
    "test": "ELECTRON_RUN_AS_NODE=true ./node_modules/.bin/electron ./node_modules/.bin/jest",
    "prettier": "prettier --write app/**/*.js",
    "prettier:staged": "pretty-quick --staged",
    "postinstall": "electron-builder install-app-deps",
    "pack": "npm run bundle && electron-builder --dir",
    "dist": "npm run bundle && electron-builder"
  },
  "keywords": [
    "android",
    "UI testing"
  ],
  "license": "ISC",
  "dependencies": {
    "@devexpress/dx-react-core": "^1.10.5",
    "@devexpress/dx-react-grid": "^1.10.5",
    "@devexpress/dx-react-grid-material-ui": "^1.10.5",
    "@material-ui/core": "^3.9.1",
    "@material-ui/icons": "^3.0.2",
    "classnames": "^2.2.6",
    "fix-path": "^2.1.0",
    "lodash": "^4.17.11",
    "minimist": "^1.2.0",
    "mobx-state-tree": "^3.10.0",
    "node-loader": "^0.6.0",
    "opencv4nodejs": "^4.11.0",
    "react-image-crop": "^6.0.18",
    "react-sizeme": "^2.5.2",
    "rxjs": "^6.3.3",
    "typeface-roboto": "0.0.54",
    "ws": "^6.1.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "concurrently": "^3.6.1",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "electron": "^3.1.1",
    "electron-builder": "^20.28.4",
    "electron-devtools-installer": "^2.2.4",
    "electron-prebuilt-compile": "^3.0.10",
    "electron-rebuild": "^1.8.2",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^1.3.1",
    "jest": "^23.6.0",
    "mobx": "^4.8.0",
    "mobx-react": "^5.4.3",
    "mobx-react-devtools": "^6.0.3",
    "prettier": "^1.16.4",
    "pretty-quick": "^1.10.0",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-hot-loader": "^4.6.3",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "style-loader": "^0.21.0",
    "webpack": "^4.27.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.14"
  }
}

And my webpack.production.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    main: ['babel-polyfill', './app/index'],
    worker: ['babel-polyfill', './app/worker.js']
  },
  mode: 'production',
  output: {
    filename: '[name]-bundle.js',
    path: path.resolve(__dirname, 'static'),
    publicPath: '/static/'
  },
  module: {
    rules: [
      {
        test: /\.node$/,
        use: 'node-loader'
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_compontents)/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({ template: 'index.html', inject: false }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ],
  target: 'electron-renderer'
}

Answer 1

You have to bundle your app with the shared object libraries of OpenCV. The opencv4nodejs contains external references to the libopency_core.3.4.dylib dynamic library of your opencv installation. You have it on you machine but it is not installed correctly on the machine where you have the issue. You have to ship the shared object libraries with the package and link correctly against them.

One of the reasons may be that electron-builder packs the whole app folder into an asar archive file completely. This makes the library unavailavble for loading. Put "asar": false into package.json file to prevent this and keep everything in folder:

"build": {
    "asar": false,
    ...

Another possible reason is that you don't link the library to the target. Set a relative path in binding.gyp for opencv4nodejs:

"link_settings": {
    "libraries": [
        "-Wl,-rpath,@loader_path/../../../opencv-build/opencv/build/lib"
    ],
},

I think there is no way to make opencv4nodejs to load shared library from archive. If you want asar try asarUnpack the libraries.

"build": {
    "asarUnpack": [
        ...
    ]
    ...