[Issue]: app.commandLine.appendSwitch throws "Cannot read properties of undefined" when running pnpm run electron

[ZYLIII]

Contact Details(optional)

No response

What is the issue you are having?

When attempting to start the Electron application using pnpm run electron, the following error occurs:

TypeError: Cannot read properties of undefined (reading 'commandLine')
    at Object.<anonymous> (C:\project_1\shibuya-1\electron.js:6:5)

It appears that the app object is not properly initialized when the commandLine.appendSwitch method is called.

Steps to Reproduce

1. Clone the project repository.
2. Install dependencies using pnpm install and pnpm run start.
3. In new terminal Run the project using pnpm run electron in anew terminal.

Attempts

1. Moved app.commandLine.appendSwitch('enable-features', 'SharedArrayBuffer') inside app.whenReady().then() to ensure it only runs after app is fully initialized. The modified section looks like this:

   app.whenReady().then(() => {
   app.commandLine.appendSwitch('enable-features', 'SharedArrayBuffer');
   createWindow();
   });

   But not working

2.Using pnpm exec electron .instead of pnpm run electron:

pnpm exec electron .works correctly and launches the application without any issues, indicating that there might be an environment path or initialization difference when using pnpm run electron. But I can not find the problem.

Any suggestions for further troubleshooting this discrepancy between pnpm run and pnpm exec would be appreciated.

Environment Information Windows10 pnpm version: 9.11.0 Electron version: ^32.0.0 Node.js version: v20.14.0

Relevant log output

PS C:\project_1\shibuya> pnpm run electron
>> 

> shibuya@0.1.11 electron C:\project_1\shibuya
> electron .

C:\project_1\shibuya\electron.js:6
app.commandLine.appendSwitch('enable-features','SharedArrayBuffer')
    ^

TypeError: Cannot read properties of undefined (reading 'commandLine')
    at Object.<anonymous> (C:\project_1\shibuya\electron.js:6:5)    at Module._compile (node:internal/modules/cjs/loader:1358:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
1416:10)
1416:10)
1416:10)                                                                                         
    at Module.load (node:internal/modules/cjs/loader:1208:32)                                   
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)     
    at node:internal/main/run_main_module:28:49

Node.js v20.14.0
 ELIFECYCLE  Command failed with exit code 1.

[cbh778899]

Can you confirm you've already installed dependencies correctly? It seems like it didn't find app when importing, likely due to the dependencies are not installed correctly. When you run npm exec, it resolves the dependencies you need online if it's not already installed in your local machine, something like the command npx, see here.

[ZYLIII]

I have confirmed that all dependencies and devDependencies listed in package.json are correctly installed in the node_modules folder. Here’s the output from my checks:

PS C:\project_1\shibuya> pnpm list --depth=0
>> 
Legend: production dependency, optional only, dev only

shibuya@0.1.11 C:\project_1\shibuya

dependencies:
@aws-sdk/client-bedrock-runtime 3.650.0
@aws-sdk/credential-providers 3.650.0
@huggingface/jinja 0.3.0
@wllama/wllama 1.16.1
electron 32.1.2
openai 4.61.0
react 18.3.1
react-bootstrap-icons 1.11.4
react-dom 18.3.1
react-markdown 9.0.1
react-router-dom 6.26.1

devDependencies:
@eslint/js 9.10.0
@types/react 18.3.5
@types/react-dom 18.3.0
@vitejs/plugin-react 4.3.1
electron-builder 25.0.5
eslint 9.10.0
eslint-plugin-react 7.35.0
eslint-plugin-react-hooks 5.1.0-rc-fb9a90fa48-20240614
eslint-plugin-react-refresh 0.4.11
globals 15.9.0
vite 5.4.3

Attempts

1.Globally Installing Electron: I installed Electron globally using: npm install -g electron However, running pnpm run electron still resulted in an error with the app object being undefined, indicating that the global installation did not resolve the compatibility issue.

2. Using Absolute Path: I modified the package.json scripts to use an absolute path:

   "scripts": {
   
   "electron": ".\\node_modules\\.bin\\electron ."
   }

   This worked on Windows but is not an ideal cross-platform solution.

3.Using cross-env to manage PATH: To address the issue with pnpm not automatically adding node_modules/.bin to the PATH, I installed cross-env: pnpm install cross-env --save-dev Then updated the package.json script:

"scripts": {
    "electron": "cross-env PATH=\"./node_modules/.bin;%PATH%\" electron ."
}

After making this change, pnpm run electron worked correctly, and I was able to start the application without any issues. This solution ensured that the local node_modules/.bin was correctly added to the PATH in a way that pnpm could recognize. I haven't tested the cross-env solution on Linux/Unix systems yet, but it should work there as well, ensuring the PATH handling is correct across different platforms.

Is there any other optimization or adjustment you would recommend based on this outcome?

[cbh778899]

It seems like there are some bugs on Windows platform, you can also try use npm instead of pnpm to see if it solves the problem, or you can just use any command you like as long as you can start it.

Another suggestion would be following the official tutorial to build a test application to see if you can run it, refers to here.

The scripts is following the official tutorial, as it should works in most situation, so please do not push your edit on scripts.

[cbh778899]

Also, you can run it without electron, just run pnpm run start and open the app in your browser, we are not interact with Node.js right now, so the performance in your browser is basically the performance in electron packed app.