在其他计算机上使用本机模块执行电子应用程序时出现JS错误

时间:2019-04-09 12:48:07

标签: reactjs opencv electron

我在电子应用程序中使用opencv4nodejs(本机模块)。

打包应用程序并尝试在另一台计算机上运行时,出现以下错误:

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)

有什么想法吗? 我发现了一个非常similar issue on github,但不确定它是否确实是

编辑

我正在使用电子制造器进行构建,并使用命令npm run dist进行构建。 这是我的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"
  }
}

还有我的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'
}

1 个答案:

答案 0 :(得分:1)

您必须将您的应用程序与OpenCV的共享对象库捆绑在一起。 opencv4nodejs包含对opencv安装的 libopency_core.3.4.dylib 动态库的外部引用。您在计算机上安装了它,但是在出现问题的计算机上未正确安装它。您必须随包一起提供共享库,并针对它们正确链接。

原因之一可能是电子构建器将整个应用程序文件夹完全打包到了 asar 存档文件中。这使得该库无法加载。将"asar": false放入 package.json 文件中以防止出现这种情况,并将所有内容保留在文件夹中:

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

另一个可能的原因是您没有将库链接到目标。在 binding.gyp 中为opencv4nodejs设置相对路径:

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

我认为没有办法使opencv4nodejs从存档中加载共享库。如果您想使用asar,请尝试asarUnpack这些库。

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