The application “Imagine” can’t be opened (MacBook 16 M1)

[okalachev]

Version

0.6.1

Operating system (version and arch)

macOS Monterey 12.2.1 M1

Describe the bug

The app can't be opened. Falls with error: The application “Imagine” can’t be opened.

I was able to run it from source though. But conversion didn't work (shows PENDING).

Screenshot

Logs

$ open Imagine.app
The application cannot be opened for an unexpected reason, error=Error Domain=RBSRequestErrorDomain Code=5 "Launch failed." UserInfo={NSLocalizedFailureReason=Launch failed., NSUnderlyingError=0x60000000c0c0 {Error Domain=NSPOSIXErrorDomain Code=111 "Unknown error: 111" UserInfo={NSLocalizedDescription=Launchd job spawn failed}}}

[meowtec]

It can't be open because I only build the app for x64. When you run from source code, you use the darwin-arm64 electron binary, so it can be opened.

So if I release the app with an arm64 target it would also be able to open.

But there is more problem: Imagine.app uses some executable binary files (they are at https://github.com/meowtec/Imagine/tree/mozjpeg-v4/bin/mac) and there may have not a arm64-compatible version.

I will try to find a MacBook M1 and build / test on it

[okalachev]

Tell me, if you need some assistance. I can try to build these binaries myself and provide you.

[meowtec]

@okalachev Thanks for your help!

I have adjust the code structure and add some test cases, then you can help by those steps:

1. Checkout the branch mozjpeg-v4.
2. Run npm test, this will test the binaries of moz-cjpeg pngquant and webp.
3. Fix wrong binaries if possible. Notice that we should use a patched version of mozjpeg (https://github.com/meowtec/mozjpeg/tree/fix-input-png-v4).
4. If all test cases passed, then you can test the app usingnpm run dev and npm run pack.
5. Fork and commit base on that branch.

[okalachev]

The tests have passed (there was a lot of warnings):

$ npm test
...
✖ 210 problems (0 errors, 210 warnings)

 PASS  modules/__tests__/common/i18n.test.ts
 PASS  modules/__tests__/common/utils.test.ts
 PASS  modules/__tests__/renderer/store.test.ts
 PASS  modules/__tests__/common/file-utils.test.ts
 PASS  modules/__tests__/renderer/job-runner.test.ts
 PASS  modules/__tests__/optimizers/webp.test.ts
 PASS  modules/__tests__/optimizers/pngquant.test.ts
 PASS  modules/__tests__/backend/optimize.test.ts (5.056 s)
 PASS  modules/__tests__/optimizers/mozjpeg.test.ts (5.076 s)

When I run the app with npm run dev, the conversion didn't work and I saw this error in the console:

13:42:39.986 › Failed to get options from localStorage, SyntaxError: Unexpected end of JSON input

npm run pack didn't succeed as well, this is the output:

npm run pack

> Imagine@0.6.1 pack
> npm run build && electron-builder --dir

> Imagine@0.6.1 build
> rimraf lib dist dist && tsc && cross-env IMAGINE_ENV=production webpack --mode=production --config lib/webpack.config.js

node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:135:10)
    at BulkUpdateDecorator.hashFactory (/Users/oleg/cloned/Imagine/node_modules/webpack/lib/util/createHash.js:145:18)
    at BulkUpdateDecorator.update (/Users/oleg/cloned/Imagine/node_modules/webpack/lib/util/createHash.js:46:50)
    at RawSource.updateHash (/Users/oleg/cloned/Imagine/node_modules/webpack-sources/lib/RawSource.js:77:8)
    at NormalModule._initBuildHash (/Users/oleg/cloned/Imagine/node_modules/webpack/lib/NormalModule.js:888:17)
    at handleParseResult (/Users/oleg/cloned/Imagine/node_modules/webpack/lib/NormalModule.js:954:10)
    at /Users/oleg/cloned/Imagine/node_modules/webpack/lib/NormalModule.js:1048:4
    at processResult (/Users/oleg/cloned/Imagine/node_modules/webpack/lib/NormalModule.js:763:11)
    at /Users/oleg/cloned/Imagine/node_modules/webpack/lib/NormalModule.js:827:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.5.0

Maybe wrong Node.js version?

5. Fork and commit base on that branch.

Not sure, what do you mean by that?

[meowtec]

@okalachev Those warnings are as expected.

Failed to get options from localStorage, SyntaxError: Unexpected end of JSON input is as expected, too.

Is there any other error information when you run dev?

The error when pack seem to be cause by incompatible Node version. What is your node version? Maybe you should try Node 16 or 14.

[okalachev]

Here is the full output of npm run dev:

$ npm run dev     

> Imagine@0.6.1 dev
> tsc && cross-env IMAGINE_ENV=development electron .

16:15:10.060 › binPath {
  pngquant: '/Users/oleg/cloned/Imagine/bin/darwin/arm64/pngquant',
  mozjpeg: '/Users/oleg/cloned/Imagine/bin/darwin/arm64/moz-cjpeg',
  cwebp: '/Users/oleg/cloned/Imagine/bin/darwin/arm64/cwebp'
}
ℹ ｢wds｣: Project is running at http://localhost:9999/
ℹ ｢wds｣: webpack output is served from /dist
ℹ ｢wds｣: Content not from webpack is served from /Users/oleg/cloned/Imagine
16:15:10.860 › app launch [
  '/Users/oleg/cloned/Imagine/node_modules/electron/dist/Electron.app/Contents/MacOS/Electron',
  '.'
]
16:15:10.891 › file:///Users/oleg/cloned/Imagine/index.html
16:15:10.897 › Checking for update
(node:72315) electron: The default of contextIsolation is deprecated and will be changing from false to true in a future release of Electron.  See https://github.com/electron/electron/issues/23506 for more information
(node:72315) ExtensionLoadWarning: Warnings loading extension at /Users/oleg/Library/Application Support/Imagine/extensions/fmkadmapgofadopljbjfkapdkoienihi: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'minimum_chrome_version'. Unrecognized manifest key 'update_url'. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
(node:72315) ExtensionLoadWarning: Warnings loading extension at /Users/oleg/Library/Application Support/Imagine/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. 
ℹ ｢wdm｣: wait until bundle finished: /dist/app.js
16:15:14.730 › Update for version 0.6.1 is not available (latest version: 0.6.1, downgrade is disallowed).
(node:72315) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
ℹ ｢wdm｣: asset app.js 2.96 MiB [emitted] (name: app)
orphan modules 199 KiB [orphan] 155 modules
runtime modules 28.5 KiB 14 modules
cacheable modules 2.5 MiB
  modules by path ./node_modules/ 2.25 MiB 140 modules
  modules by path ./modules/ 255 KiB
    modules by path ./modules/renderer/ 200 KiB 87 modules
    modules by path ./modules/locales/*.ts 38.7 KiB 12 modules
    modules by path ./modules/common/*.ts 12.8 KiB
      ./modules/common/utils.ts 4.03 KiB [built] [code generated]
      ./modules/common/types.ts 2.78 KiB [built] [code generated]
      ./modules/common/task.ts 2.63 KiB [built] [code generated]
      ./modules/common/i18n.ts 3.38 KiB [built] [code generated]
    ./modules/ipc-bridge/renderer.ts 3.35 KiB [built] [code generated]
  ./package.json 3.16 KiB [built] [code generated]
13 modules
webpack 5.53.0 compiled successfully in 4772 ms
ℹ ｢wdm｣: Compiled successfully.
16:15:15.689 › Failed to get options from localStorage, SyntaxError: Unexpected end of JSON input
16:15:15.766 › url loaded: file:///Users/oleg/cloned/Imagine/index.html

When I drag'n'drop a picture to the window, nothing happens. I see the picture and a yellow circle with a hover text PENDING.

[meowtec]

@okalachev Is there any error in the chrome devtool? Menu - Debug - Toggle Developer Tools, or option + command + i, then check the Console tab, like this:

BTW, I have make a dmg for arm64, you can download it here: https://1drv.ms/u/s!AhCJoJBDQg9_hRQ8FuhrMdSpy852 When you run Imagine.app, you can access the app log files at ~/Library/Logs/Imagine/.

[okalachev]

I guess it's this error:

react-dom.development.js:67 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at div
    at div
    at Grid (webpack://Imagine/./node_modules/react-window/dist/index.esm.js?:174:30)
    at div
    at TaskList (webpack://Imagine/./modules/renderer/components/TaskList.tsx?:26:3)
    at Connect(TaskList) (webpack://Imagine/./node_modules/react-redux/es/components/connectAdvanced.js?:233:68)
    at div
    at Provider (webpack://Imagine/./node_modules/react-redux/es/components/Provider.js?:18:20)
    at App (webpack://Imagine/./modules/renderer/App.tsx?:36:5)
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
warnForMissingKey @ react-dom.development.js:13135
warnOnInvalidKey @ react-dom.development.js:13602
reconcileChildrenArray @ react-dom.development.js:13651
reconcileChildFibers @ react-dom.development.js:14125
reconcileChildren @ react-dom.development.js:16990
updateHostComponent @ react-dom.development.js:17632
beginWork @ react-dom.development.js:19080
beginWork$1 @ react-dom.development.js:23935
performUnitOfWork @ react-dom.development.js:22771
workLoopSync @ react-dom.development.js:22702
renderRootSync @ react-dom.development.js:22665
performSyncWorkOnRoot @ react-dom.development.js:22288
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
batchedUpdates$1 @ react-dom.development.js:22382
notify @ Subscription.js:20
notifyNestedSubs @ Subscription.js:90
handleChangeWrapper @ Subscription.js:95
dispatch @ redux.js:307
eval @ listen.ts:57
emit @ events.js:315
onMessage @ electron/js2c/renderer_init.js:91

What is your node version?

Node.js v17.5.0

[meowtec]

@okalachev Warning: Each child in a list should have a unique "key" prop... is not the point because it is a normal thing.

[meowtec]

@okalachev I can not have a test but I guess because os.cpus().length returns 0 on M1.

See https://github.com/microsoft/vscode/issues/112122

I have fixe it at https://github.com/meowtec/Imagine/commit/803b75949d1a90591bd37f27e58b9305858a0886. You can git pull and help me to test.

[okalachev]

It doesn't return 0 on my computer:

$ node
Welcome to Node.js v17.5.0.
Type ".help" for more information.
> os.cpus().length
10

But your change somehow seems to fix things:

[meowtec]

It doesn't return 0 on my computer:

$ node
Welcome to Node.js v17.5.0.
Type ".help" for more information.
> os.cpus().length
10

But your change somehow seems to fix things:

Because it is in electron, not the original node enviroment.

[okalachev]

So, it turns out, that the app now works. There only should be released a new version with an ARM64 app, or a Universal app.

[ghost]

I try to build on my M1 macbook pro by following steps without error, and arm64 app works fine. hope this may help.

Change the shell working directory

cd Downloads

Clone a repository into a new directory

git clone https://github.com/meowtec/Imagine.git

Install Python 2.7.18

pyenv install 2.7.18

Find and copy Python directory

whereis python

Export Python $PATH for current shell window, this is solution to 'Exit code: ENOENT. spawn /usr/bin/python ENOENT', remember to replace your 'username' in the following command

export PYTHON_PATH="/Users/username/.pyenv/shims/python"

Install dependencies

npm install

Build an Electron App

npm run build npx electron-builder --mac --arm64

appOutDir=dist/mac-arm64