Blank screen when building from source

[RBFraphael]

OS

Windows 11

VERSION

OS Version: 22631.3155
Shown in Terminal (cmd): 10.0.22631.3155

ISSUE DESCRIPTION

I'm trying to build from source, to get a portable version which I can share with others and run without needing to install. But, when trying to run it from source and/or from the builded version, it only shows a blank screen on the window.

Important notes:

• I`m using Node 20.11.1;
• I haven't installed windows-build-tools, because the package is deprecated, and NodeJS already has build tools for Windows (as described on the page https://www.npmjs.com/package/windows-build-tools );
• I've deleted the original package-lock.json, because it causes errors during npm install due to invalid certificates on taobao mirrors (can't download packages), and removing the package-lock.json solved the problem;

After downloading all dependencies, running npm start and npm run electron (after npm start has finished Webpack build), it opens a window, but doesn't show any content inside of it (it remains blank).

Tried to build runtime binaries with npm pack:prepare and npm pack:win (to build for 64-bit), it builds without errors, but, when trying to run from the builded exe, it shows a blank window too.

Checking the terminal, when running npm install, it causes some warnings, as follows, but no fatal errors:

> another-redis-desktop-manager@1.1.1 start
> npm run dev


> another-redis-desktop-manager@1.1.1 dev
> webpack serve --mode development --progress --config build/webpack.dev.conf.js

10% building 1/1 modules 0 activei ｢wds｣: Project is running at http://localhost:9988/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to /index.html


 WARNING  Compiled with 3 warnings                                                       17:22:57

 warning  in ./node_modules/pickleparser/dist/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-object-rest-spread' imported from C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\babel-virtual-resolve-base.js
    at new NodeError (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\vendor\import-meta-resolve.js:194:5)
    at packageResolve (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\vendor\import-meta-resolve.js:908:9)
    at moduleResolve (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\vendor\import-meta-resolve.js:937:20)
    at defaultResolve (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\vendor\import-meta-resolve.js:1007:15)
    at resolve (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\vendor\import-meta-resolve.js:1020:12)
    at tryImportMetaResolve (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\files\plugins.js:142:45)
    at resolveStandardizedNameForImport (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\files\plugins.js:164:19)
    at resolveStandardizedName (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\files\plugins.js:173:22)
    at loadPlugin (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\files\plugins.js:52:20)
    at loadPlugin.next (<anonymous>)
    at createDescriptor (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-descriptors.js:140:16)
    at createDescriptor.next (<anonymous>)
    at step (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:261:32)
    at evaluateAsync (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:291:5)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:44:11
    at Array.forEach (<anonymous>)
    at Function.async (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:43:15)
    at Function.all (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:216:13)
    at Generator.next (<anonymous>)
    at createDescriptors (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-descriptors.js:102:41)
    at createDescriptors.next (<anonymous>)
    at createPluginDescriptors (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-descriptors.js:99:17)
    at createPluginDescriptors.next (<anonymous>)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\gensync-utils\functional.js:39:27
    at Generator.next (<anonymous>)
    at mergeChainOpts (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-chain.js:349:34)
    at mergeChainOpts.next (<anonymous>)
    at chainWalker (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-chain.js:316:14)
    at chainWalker.next (<anonymous>)
    at loadFileChain (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-chain.js:191:24)
    at loadFileChain.next (<anonymous>)
    at buildRootChain (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\config-chain.js:77:27)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\partial.js:72:62)
    at loadPrivatePartialConfig.next (<anonymous>)
    at loadPartialConfig (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\config\partial.js:115:25)
    at loadPartialConfig.next (<anonymous>)
    at step (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:269:25)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:223:11)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:50:45
    at step (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:287:14)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:223:11)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:189:28
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\@babel\core\lib\gensync-utils\async.js:67:7
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:113:33
    at step (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:287:14)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:223:11)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\gensync\index.js:189:28
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read/context:68:3)     

 @ ./src/util.js 111:21-44
 @ ./src/main.js

 warning  in ./node_modules/ssh2/lib/protocol/crypto.js

Module not found: Error: Can't resolve './crypto/build/Release/sshcrypto.node' in 'C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\ssh2\lib\protocol'

 warning  in ./node_modules/ssh2/lib/protocol/constants.js

Module not found: Error: Can't resolve 'cpu-features' in 'C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\ssh2\lib\protocol'

[qishibo]

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-object-rest-spread'

you haven't finished installing.
rm -rf node_modules and rerun npm install

[RBFraphael]

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find package '@babel/plugin-proposal-object-rest-spread'

you haven't finished installing. rm -rf node_modules and rerun npm install

Tried this over 4 times, and still not working, directly.

I've tried manually installing @babel/plugin-proposal-object-rest-spread ( npm install @babel/plugin-proposal-object-rest-spread ) and started working from the source code (running with npm start and npm run electron), but, now, I can't build the exe files. When I run npm run pack:prepare, it throws some errors. See below:

> another-redis-desktop-manager@1.1.1 pack:prepare
> npm run build && cp -r pack/electron/* dist/


> another-redis-desktop-manager@1.1.1 build
> node build/build.js

Hash: 5da0444214344425bb83
Version: webpack 4.47.0
Time: 16290ms
Built at: 01/03/2024 00:23:28
                                          Asset      Size  Chunks               Chunk Names
                               editor.worker.js   421 KiB
                                 json.worker.js   783 KiB
        static/css/app.c9146e596ad2fadacfce.css  20.4 KiB       0  [immutable]  app
static/css/vendors~app.ae196f21555545734b8b.css   114 KiB       2  [immutable]  vendors~app
               static/fonts/codicon.805fb6a.ttf  66.6 KiB
   static/fonts/fontawesome-webfont.674f50d.eot   162 KiB
 static/fonts/fontawesome-webfont.af7ae50.woff2  75.4 KiB
   static/fonts/fontawesome-webfont.b06871f.ttf   162 KiB
  static/fonts/fontawesome-webfont.fee66e7.woff  95.7 KiB
     static/img/fontawesome-webfont.912ec66.svg   434 KiB
            static/js/0.83622960f9a7a1627f33.js   547 KiB       0  [immutable]  app
            static/js/2.9d24d4f3082970f7ec52.js  11.2 MiB       2  [immutable]  vendors~app
            static/js/3.c00e01c540454051cd29.js   160 KiB       3  [immutable]
     static/js/manifest.adab63fb8f0fe0cf3c18.js  8.97 KiB       1  [immutable]  manifest
Entrypoint app = static/js/manifest.adab63fb8f0fe0cf3c18.js static/css/vendors~app.ae196f21555545734b8b.css static/js/2.9d24d4f3082970f7ec52.js static/css/app.c9146e596ad2fadacfce.css static/js/0.83622960f9a7a1627f33.js

WARNING in ./node_modules/ssh2/lib/protocol/crypto.js
Module not found: Error: Can't resolve './crypto/build/Release/sshcrypto.node' in 'C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\ssh2\lib\protocol'
 @ ./node_modules/ssh2/lib/protocol/crypto.js
 @ ./node_modules/ssh2/lib/keygen.js
 @ ./node_modules/ssh2/lib/index.js
 @ ./node_modules/tunnel-ssh/index.js
 @ ./src/redisClient.js
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/components/ConnectionWrapper.vue?vue&type=script&lang=js
 @ ./src/components/ConnectionWrapper.vue?vue&type=script&lang=js
 @ ./src/components/ConnectionWrapper.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/components/Connections.vue?vue&type=script&lang=js     
 @ ./src/components/Connections.vue?vue&type=script&lang=js
 @ ./src/components/Connections.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/Aside.vue?vue&type=script&lang=js
 @ ./src/Aside.vue?vue&type=script&lang=js
 @ ./src/Aside.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js

WARNING in ./node_modules/ssh2/lib/protocol/constants.js
Module not found: Error: Can't resolve 'cpu-features' in 'C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\ssh2\lib\protocol'
 @ ./node_modules/ssh2/lib/protocol/constants.js
 @ ./node_modules/ssh2/lib/server.js
 @ ./node_modules/ssh2/lib/index.js
 @ ./node_modules/tunnel-ssh/index.js
 @ ./src/redisClient.js
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/components/ConnectionWrapper.vue?vue&type=script&lang=js
 @ ./src/components/ConnectionWrapper.vue?vue&type=script&lang=js
 @ ./src/components/ConnectionWrapper.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/components/Connections.vue?vue&type=script&lang=js     
 @ ./src/components/Connections.vue?vue&type=script&lang=js
 @ ./src/components/Connections.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/Aside.vue?vue&type=script&lang=js
 @ ./src/Aside.vue?vue&type=script&lang=js
 @ ./src/Aside.vue
 @ ./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue?vue&type=script&lang=js
 @ ./src/App.vue
 @ ./src/main.js

ERROR in static/js/0.83622960f9a7a1627f33.js from UglifyJs
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at UglifyJsPlugin.optimizeFn (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:160:259)
    at _next0 (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at eval (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:37:1)

ERROR in static/js/manifest.adab63fb8f0fe0cf3c18.js from UglifyJs
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at UglifyJsPlugin.optimizeFn (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:160:259)
    at _next0 (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at eval (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:37:1)

ERROR in static/js/2.9d24d4f3082970f7ec52.js from UglifyJs
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at UglifyJsPlugin.optimizeFn (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:160:259)
    at _next0 (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at eval (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:37:1)

ERROR in static/js/3.c00e01c540454051cd29.js from UglifyJs
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:217:37
    at Array.forEach (<anonymous>)
    at UglifyJsPlugin.optimizeFn (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\uglifyjs-webpack-plugin\dist\index.js:160:259)
    at _next0 (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at eval (eval at create (C:\Users\raphael\Git\qishibo\AnotherRedisDesktopManager\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:37:1)

  Build failed with errors.

Looks like something related to the ssh2 library, but, even trying to manually update it, stills not working.

[qishibo]

just ignore the WARNINGs.

what's the version of your nodejs? I worked well in v16

[RBFraphael]

I'm ignoring the warnings. The problem is these errors that causes the build to fail.

I've tested both latest LTS (20) and 16 (as you said), but, with both, I'm facing the same behaviour.

• Need to remove the original package-lock.json, or the packages doesn't install (due to taobao mirrors problem)
• Manually install @babel/plugin-proposal-object-rest-spread, otherwise it causes the blank window (I think Webpack doesn't properly build the assets without it, but can't figure out why it isn't installed with npm install)
• It works running from source (with npm start and npm run electron)
• It doesn't build final exe (when running npm run pack:prepare and npm run pack:win)

[RBFraphael]

Finally I managed to build the project.

• No needed to install windows-build-tools
• Used Node 16.20.2 (through NVM for Windows)
• First, I've cloned the repo, again.
• After clone was completed, I've edited the package-lock.json file, replacing all occurrences of registry.npm.taobao.org to registry.npmmirror.com
• Then, executed the npm install --platform=win32 command, to download and install all dependencies
• Tested the project with npm start, then npm run electron
• Built the executables with npm run pack:prepare and npm run pack:win

The final binaries are successfully built and ready.

Thanks!

[qishibo]

b4eaa11
I've modified the expired mirrors, thx!