Having trouble with native node modules (Uncaught Exception: TypeError)

code-ric commented 2 years ago

Prerequisites

[x] Using npm
[x] Using an up-to-date main branch
[x] Using latest version of devtools. Check the docs for how to update
[x] Tried solutions mentioned in #400
[x] For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

The executable(s) under \release\build and release\build\win-unpacked should be working.

Current Behavior

Both executables print the following JavaScript error:

Uncaught Exception:
TypeError: Cannot read properties of undefined (reading 'indexOf')
    at Function.t.getFileName (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:8:42726)
    at t (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:8:41876)
    at Object.49127 (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:2:86290)
    at r (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:14:832045)
    at C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:2:86863
    at Object.70928 (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:2:86931)
    at r (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:14:832045)
    at Object.93719 (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:2:110836)
    at r (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:14:832045)
    at Object.64878 (C:\Users\cedri\AppData\Local\Programs\electron-react-boilerplate\resources\app.asar\dist\main\main.js:2:114182)

Steps to Reproduce

These are just guesses what could be the reason for the cause:

Install and use a native module as a dev dependency like this
Include the dependency in the release/app/package.json

Run npm i resulting in:


> postinstall
> ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts && opencollective-postinstall

• electron-builder  version=23.0.3
• loaded configuration  file=package.json ("build" field)
• installing production dependencies  platform=win32 arch=x64 appDir=C:\Users\cedri\Documents\VS Projects\poe-community-messenger\release\app
Thank you for using electron-react-boilerplate!
If you rely on this package, please consider supporting our open collective:
> https://opencollective.com/electron-react-boilerplate-594/donate

prepare husky install

husky - Git hooks installed

added 1 package, and audited 1532 packages in 20s


4. Run `npm run package` resulting in:

package ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never

build concurrently "npm run build:main" "npm run build:renderer"

[1] [1] > build:renderer [1] > cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts [1] [0] [0] > build:main [0] > cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts [0] [1] npm run build:renderer exited with code 0 [0] npm run build:main exited with code 0 • electron-builder version=23.0.3 os=10.0.19043 • loaded configuration file=package.json ("build" field) • writing effective config file=release\build\builder-effective-config.yaml • rebuilding native dependencies dependencies=electron-overlay-window@2.0.1 platform=win32 arch=x64 • packaging platform=win32 arch=x64 electron=18.0.3 appOutDir=release\build\win-unpacked • building target=nsis file=release\build\ElectronReact Setup 4.5.0.exe archs=x64 oneClick=true perMachine=false • building block map blockMapFile=release\build\ElectronReact Setup 4.5.0.exe.blockmap



5. Start the executables and receive the error.

## Possible Solution (Not obligatory)

<!--- Suggest a reason for the bug or how to fix it. -->
/

## Context

<!--- How has this issue affected you? What are you trying to accomplish? -->
<!--- Did you make any changes to the boilerplate after cloning it? -->
<!--- Providing context helps us come up with a solution that is most useful in the real world -->
I try to package the an application for windows and it has been great till now. For some reason I have problems with native modules.

## Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

- Node version : v16.13.1
- Electron version: 18.0.3 
- electron-react-boilerplate version or branch : 4.5.0
- Operating System and version : Win10
- Link to your project : /

code-ric commented 2 years ago

After hours of digging through issues in other repositories I was able to find a way to get it working.

First of all I added terserOptions to the webpack.config.main.prod.ts that tell webpack to not compress vars as suggested in this issue :

optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            reduce_vars: false,
          },
        },
      }),
    ],
  },

Right after that I got another error which indicated that I had another native module not added to the /release/app/package.json file. So I added it as a dev dependency in the parent folder and as a regular dependency in the app-folder.

Next I did an npm run rebuild and npm run package which resulted in a working executable for me.

I hope that some people find this helpful in the future :)

kmq116 commented 8 months ago

After hours of digging through issues in other repositories I was able to find a way to get it working.经过几个小时的挖掘其他存储库中的问题后，我找到了一种让它工作的方法。

First of all I added terserOptions to the webpack.config.main.prod.ts that tell webpack to not compress vars as suggested in this issue :首先，我将 terserOptions 添加到 webpack.config.main.prod.ts 中，告诉 webpack 不要按照本期中的建议压缩变量：
optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            reduce_vars: false,
          },
        },
      }),
    ],
  },
Right after that I got another error which indicated that I had another native module not added to the /release/app/package.json file. So I added it as a dev dependency in the parent folder and as a regular dependency in the app-folder.之后我收到另一个错误，表明我有另一个本机模块未添加到 /release/app/package.json 文件中。因此，我将其添加为父文件夹中的开发依赖项以及应用程序文件夹中的常规依赖项。

Next I did an npm run rebuild and npm run package which resulted in a working executable for me.接下来我做了一个 npm run rebuild 和 npm run package ，这为我生成了一个可以工作的可执行文件。

I hope that some people find this helpful in the future :)我希望有些人将来会发现这有帮助:)

"Thank you, brother. It has resolved my issue."

electron-react-boilerplate / electron-react-boilerplate