The generated sample Electron app crashes on startup

[teszes]

Bug Description:

Starting a new project based on the yeoman templates and building and running the electron app produces an error and the app does not start. Tracing the error to a generated file in /lib, it seems a non-function object is being called as a function, and removing that line, or the extra () to call the object seemingly fixes the issue.

Steps to Reproduce:

Following the guide at:
https://theia-ide.org/docs/composing_applications/

Prerequisites installed as per:
https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites

NPM version 10.9.2
Yarn version 1.22.22
Yeoman version 5.1.0

1. Run yo theia-extension in an empty directory. Select Hello World as the option to be generated.
2. Run yarn build:browser in the directory root, completes successfully.
3. Run yarn start:browser in the directory root, the app starts successfully and is accessible on localhost.
4. Run yarn build:electron in the directory root, completes successfully.
5. Run yarn start:electron in the directory root, this produces the following output:

$ yarn --cwd electron-app start
$ theia start
App threw an error during load
TypeError: __webpack_require__(...) is not a function
    at ./src-gen/backend/electron-main.js (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:54:73)
    at __webpack_require__ (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:398:42)
    at /home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:416:426
    at __webpack_require__.O (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:446:23)
    at __webpack_require__.x (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:417:54)
    at __webpack_require__.x (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:580:20)
    at /home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:588:57
    at Object.<anonymous> (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:590:12)
    at Module._compile (node:internal/modules/cjs/loader:1373:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1432:10)
A JavaScript error occurred in the main process
Uncaught Exception:
TypeError: __webpack_require__(...) is not a function
    at ./src-gen/backend/electron-main.js (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:54:73)
    at __webpack_require__ (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:398:42)
    at /home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:416:426
    at __webpack_require__.O (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:446:23)
    at __webpack_require__.x (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:417:54)
    at __webpack_require__.x (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:580:20)
    at /home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:588:57
    at Object.<anonymous> (/home/teszes/Projects/Test/electron-app/lib/backend/electron-main.js:590:12)
    at Module._compile (node:internal/modules/cjs/loader:1373:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1432:10)

Navigating to ./src-gen/backend/electron-main.js, finding line 54:

__webpack_require__(/*! fix-path */ "../node_modules/fix-path/index.js")();

Can be worked around by commenting the line out like such:

// __webpack_require__(/*! fix-path */ "../node_modules/fix-path/index.js")();

Or removing the final parenthesis:

__webpack_require__(/*! fix-path */ "../node_modules/fix-path/index.js");

They both result in the app starting up normally with no errors and the window appearing.

yarn run v1.22.22
$ yarn --cwd electron-app start
$ theia start
Showing main window early
2025-01-31T15:40:12.685Z root INFO Backend DefaultMessagingService.initialize: 11.0 ms [Finished 0.236 s after backend start]
2025-01-31T15:40:12.686Z root INFO Backend Object.initialize: 10.3 ms [Finished 0.236 s after backend start]
2025-01-31T15:40:12.686Z root INFO Backend LocalizationServerImpl.initialize: 10.2 ms [Finished 0.236 s after backend start]
2025-01-31T15:40:12.689Z root INFO configured all backend app contributions
2025-01-31T15:40:12.689Z root INFO Backend WebsocketEndpoint.onStart: 0.6 ms [Finished 0.240 s after backend start]
2025-01-31T15:40:12.689Z root INFO Configuration directory URI: 'file:///home/teszes/.theia'
2025-01-31T15:40:12.690Z root INFO Theia app listening on http://127.0.0.1:39855.
2025-01-31T15:40:12.691Z root INFO Backend DefaultWorkspaceServer.onStart: 2.4 ms [Finished 0.243 s after backend start]
2025-01-31T15:40:12.692Z root INFO Finished starting backend application: 0.0 ms [Finished 0.243 s after backend start]
2025-01-31T15:40:13.052Z root INFO creating connection for 1
2025-01-31T15:40:13.433Z root WARN A command editor.action.toggleStickyScroll is already registered.
Opening channel for service path '/services/electron-window'.
2025-01-31T15:40:13.461Z root INFO Start frontend contributions: 62.1 ms [Finished 0.759 s after frontend start]
2025-01-31T15:40:13.461Z root INFO Changed application state from 'init' to 'started_contributions'.
2025-01-31T15:40:13.465Z root INFO Changed application state from 'started_contributions' to 'attached_shell'.
2025-01-31T15:40:13.465Z root INFO >>> Restoring the layout state...
2025-01-31T15:40:13.558Z root WARN Linked preference "workbench.colorCustomizations" not found.
2025-01-31T15:40:13.568Z root INFO <<< The layout has been successfully restored.
2025-01-31T15:40:13.569Z root INFO Initialize the workbench layout: 102.6 ms [Finished 0.871 s after frontend start]
2025-01-31T15:40:13.569Z root INFO Changed application state from 'attached_shell' to 'initialized_layout'.
2025-01-31T15:40:14.374Z root INFO Frontend application start: 956.4 ms [Finished 1.926 s after backend start]
2025-01-31T15:40:14.374Z root INFO Replace loading indicator with ready workbench UI (animation): 805.2 ms [Finished 1.677 s after frontend start]
2025-01-31T15:40:14.374Z root INFO Changed application state from 'initialized_layout' to 'ready'.

Additional Information

• Operating System: Fedora 41 kernel 6.12.10-200.fc41.x86_64
• Theia Version: 1.58.0

I am not a seasoned JS dev, my primary dev language has never been JS, and I'm unfamiliar with the ecosystem, so I might be doing something wrong.

Any help is really appreciated!

[AsriFox]

There is a typo in backend-generator.ts#L44. Because of it, extra braces are generated on rebuild every time, like so:

• require('fix-path')(); instead of require('fix-path');
• __webpack_require__(/*! fix-path */ "../node_modules/fix-path/index.js")(); instead of __webpack_require__(/*! fix-path */ "../node_modules/fix-path/index.js");

[msujew]

I'm not sure what's wrong here exactly, as the fix-path package simply exports a function which should be callable. We haven't changed anything about the code in a few years and there hasn't been any update on the package in a few years as well. In fact, nothing should have changed. Note that excluding the fix-path package likely results in errors on Mac and Linux platforms.

I'll take a look at this on Monday.

[msujew]

I could imagine that the fix-path dependency is getting hoisted in the root/node_modules/@theia/electron/node_modules directory. However, in that case the webpack bundler should already fail. I'll see what might be wrong there.

[rodat-dev]

@msujew - was trying to submit a PR but I don't want to have to go through the submission guidelines now for a 2 character fix.

Here's the fix as a separate issue,

#14809

[msujew]

@rodat-dev Thank you, but as outlined in my comment above #14804 (comment), just removing the parenthesis (or for that matter, the whole call) breaks the environment variable support on various operating systems. I'll try to reproduce this once I'm back at work to see what the root cause is.

[JonasHelming]

@msujew This might be related to an issue we discovered when building the Theia IDE with the new 1.58 release and it might be related to #14781
But I did not investigate at all.
@jfaltermeier will comment tomorrow

[msujew]

@JonasHelming I see, I wasn't aware of #14781 getting merged.

[msujew]

See #14812 for a fix. We probably want to create a patch release for that.

[jfaltermeier]

I’ll do a patch release once the PR is merged. This is the same issue we saw in the Theia IDE.

[tsmaeder]

The provided fix only works when the back-end is webpacked. I don't think we want to force this as the side-effect of a simple dependency update. @msujew can we use the async import function to load the module?