Cannot GET /bundle.js with browser production build

[perrinjerome]

Bug Description:

I have been using a theia browser application very similar to examples/browser, where unlike examples/browser which uses theia build in development mode (see below), I just used the theia build with default mode, which is production.

theia/examples/browser/package.json

Line 65 in bb7cdbb

"bundle": "yarn rebuild && theia build --mode development",

It was working fine with theia 1.35.0 but when I tried to update to 1.42.0 I have an error when opening http://localhost:3000/ with the browser because /bundle.js serves an error page Cannot GET /bundle.js.

Steps to Reproduce:

After cloning theia repository:

yarn install
cd examples/browser/
yarn compile
npx theia clean  # make sure we are clean from previous builds
npx theia rebuild
npx theia build  # ( without --mode=production )
npx theia start

# test the application, this prints 200 on success, 404 on error
curl -s -o /dev/null -w "%{http_code}" http://localhost:3000/bundle.js

Additional Information

I have bisected that this comes from 45a0953 which seems unrelated, but maybe triggers something with webpack in production mode. I have no idea why this would happen, but when reverting part of this commit by applying this patch on top of master, bundle.js is generated again:

diff --git a/packages/core/src/browser/preload/theme-preload-contribution.ts b/packages/core/src/browser/preload/theme-preload-contribution.ts
index a8df24634..c275f72ec 100644
--- a/packages/core/src/browser/preload/theme-preload-contribution.ts
+++ b/packages/core/src/browser/preload/theme-preload-contribution.ts
@@ -17,14 +17,14 @@
 import { PreloadContribution } from './preloader';
 import { DEFAULT_BACKGROUND_COLOR_STORAGE_KEY } from '../frontend-application-config-provider';
 import { injectable } from 'inversify';
-import { DefaultTheme } from '@theia/application-package';
+// import { DefaultTheme } from '@theia/application-package';
 
 @injectable()
 export class ThemePreloadContribution implements PreloadContribution {
 
     initialize(): void {
         const dark = window.matchMedia?.('(prefers-color-scheme: dark)').matches;
-        const value = window.localStorage.getItem(DEFAULT_BACKGROUND_COLOR_STORAGE_KEY) || DefaultTheme.defaultBackgroundColor(dark);
+        const value = window.localStorage.getItem(DEFAULT_BACKGROUND_COLOR_STORAGE_KEY) || (dark ? '#1E1E1E' : '#FFFFFF');
         document.documentElement.style.setProperty('--theia-editor-background', value);
     }

I am not suggesting doing this change, just mentioning this in case it helps in tracking down the issue.

• Operating System: linux
• Theia Version: git master

[msujew]

@planger Can confirm, this is related to #12897. The @theia/application-package imports from nano which imports from node:url - which obviously doesn't load in a browser context. This also prevents the whole preload script from running, as it already fails during import time.

See #12964 for a fix.

[planger]

Thanks @perrinjerome for raising this issue and thank you very much @msujew for the analysis and fix! I've tested and approved #12964.