SPA white-screen: webpack runtime chunk not loaded in templates/index.php and templates/settings/admin.php

[rubenvdlinde]

Bug Report

Summary

Both SPA entry points fail to mount because the webpack runtime chunk (softwarecatalog-runtime.js) is not registered in the PHP templates. Without the runtime, __webpack_require__ is never bootstrapped, and all modules pushed to self.webpackChunksoftwarecatalog[] are never executed.

Affected templates

• templates/index.php — loads only softwarecatalog-main
• templates/settings/admin.php — loads only softwarecatalog-settings

Root cause

@nextcloud/webpack-vue-config extracts a separate runtime chunk (softwarecatalog-runtime.js). Both entry-point bundles start with:

(self.webpackChunksoftwarecatalog=self.webpackChunksoftwarecatalog||[]).push(...)

They push module definitions into the chunk array but never call __webpack_require__ themselves — that bootstrap lives exclusively in the runtime. Without it the Vue app never initialises and both <div id="softwarecatalog"> and <div id="settings"> remain empty.

Additional issue

The runtime chunk has n.p="/apps/softwarecatalog/js/" as the webpack public path, but the app is installed under /custom_apps/softwarecatalog/. Dynamic imports of further split chunks (e.g. lazy routes) will produce 404s even after the runtime is loaded.

Expected fix

In templates/index.php:

Util::addScript($appId, $appId . '-runtime');
Util::addScript($appId, $appId . '-shared-vendor');
Util::addScript($appId, $appId . '-shared-nc-vue');
Util::addScript($appId, $appId . '-main');

In templates/settings/admin.php:

Util::addScript($appId, $appId . '-runtime');
Util::addScript($appId, $appId . '-shared-vendor');
Util::addScript($appId, $appId . '-shared-nc-vue');
Util::addScript($appId, $appId . '-settings');

Also fix the webpack output.publicPath in webpack.config.js to use /custom_apps/softwarecatalog/js/.

Reproduction

1. Enable the softwarecatalog app (v0.2.0)
2. Navigate to /index.php/apps/softwarecatalog
3. The app content div (<div id="softwarecatalog">) remains empty — no navigation, no content
4. Navigate to /index.php/settings/admin/softwarecatalog
5. The settings div (<div id="settings">) is never populated by the Vue component

Impact

Gate-19 e2e-coverage cannot be satisfied for the org-archimate-export frontend scenarios (user-triggers-organization-export-with-toggles, no-organization-selected, default-checkbox-state, export-button-shows-loading-state-during-download) as the ArchiMate settings section does not render.

[rubenvdlinde]

Root cause + fix

Root cause: both and called only for the entry chunk ( / ). Webpack's runtimeChunk: { name: 'runtime' } setting emits a separate that bootstraps . Without it, the (self.webpackChunksoftwarecatalog=...).push(...) call in the entry chunk fails silently, Vue never mounts, and the page is a white screen.

Fix (PR #324): both templates now load all chunks in dependency order:

Util::addScript($appId, $appId . '-runtime');
Util::addScript($appId, $appId . '-shared-vendor');
Util::addScript($appId, $appId . '-shared-nc-vue');
Util::addScript($appId, $appId . '-main'); // or -settings

Also removed the @e2e exclude annotation from org-archimate-export spec Requirement 14 and wrote 5 real Playwright UI tests that now pass against the working SPA. Gate-19 reports 4 covered / 0 uncovered.