theia build --watch does not work with the electron example app when the backend is webpacked

[kittaakos]

Bug Description:

When I do Theia development from the sources and run my setup in watch mode, my electron application does not pick up the code changes I made in the electron main. After restarting the electron app mode in debug mode, my changes are not picked up. I noticed it in a downstream project when I updated to Theia 1.39.0, but I can reproduce it with the Theia source code. The modifications do not get into the webpacked code. What am I doing wrong? Is this a known issue or expected behavior? Thank you!

Steps to Reproduce:

1. Check out Theia cd0aec7

   git rev-parse --short HEAD
   cd0aec7f80

2. Clean the lib folders (I do not know if necessary) and build Theia

   rm -rf ./packages/core/lib \
   && rm ./packages/core/tsconfig.tsbuildinfo \
   && rm -rf ./examples/electron/lib \
   && yarn && yarn electron rebuild && yarn build

   ✨  Done in 138.39s.

3. Verify the lib folders:

   grep -rl "Hello Theia" ./packages/core/lib

   grep -rl "Hello Theia" ./examples/electron/lib/backend

4. Open a new shell and watch@theia/core:

   yarn --cwd ./packages/core watch

5. Open another shell and watch the electron example app:

   yarn --cwd ./examples/electron watch

6. Make your code changes. Append a console log to ElectronMainApplication#start:

   diff --git a/packages/core/src/electron-main/electron-main-application.ts b/packages/core/src/electron-main/electron-main-application.ts
   index bf43b2cb02..4d77e7f61e 100644
   --- a/packages/core/src/electron-main/electron-main-application.ts
   +++ b/packages/core/src/electron-main/electron-main-application.ts
   @@ -192,6 +192,7 @@ export class ElectronMainApplication {
        }
    
        async start(config: FrontendApplicationConfig): Promise<void> {
   +        console.log('Hello Theia');
            this.useNativeWindowFrame = this.getTitleBarStyle(config) === 'native';
            this._config = config;
            this.hookApplicationEvents();

7. Both shell running the watch mode has detected the file change. Verify them!

   grep -rl "Hello Theia" ./packages/core/lib
   ./packages/core/lib/electron-main/electron-main-application.js

   grep -rl "Hello Theia" ./examples/electron/lib/backend

   The backend changes are not picked up.

8. Stop and restart the two watch processes (in two separate shells). Verify the output again!

   grep -rl "Hello Theia" ./packages/core/lib
   ./packages/core/lib/electron-main/electron-main-application.js

   grep -rl "Hello Theia" ./examples/electron/lib/backend
   ./examples/electron/lib/backend/electron-main.js.map
   ./examples/electron/lib/backend/electron-main.js

   Now it works.

Additional Information

• Operating System: macOS 13.4.1
• Theia Version: cd0aec7

---

Update:

code changes I made in the electron main.

It's the same for the backend code, so the problem is not limited to the electron-main modules. The watch mode works fine for the frontend.

[kittaakos]

@msujew and @vince-fugnitto, could you please help with this? Is this something that should work, and I need to correct my dev steps, or it still needs to be supported by Theia? Thank you!

[msujew]

@kittaakos I'll look into this 👍