Fix blank personal settings page from mismatched bundle names
Build main artifact / package (push) Successful in 1m11s
Lint info.xml / xml-lint (push) Successful in 14s
Lint PHP / php-lint (8.2) (push) Successful in 48s
Lint PHP / php-lint (8.3) (push) Successful in 39s
Lint PHP / php-lint (8.4) (push) Successful in 34s
PHPUnit / unit-tests (push) Successful in 37s

@nextcloud/vite-config prefixes every entry name with the app id, so the
entry "workflow-deck-automation-personal-settings" was emitted as
js/workflow_deck_automation-workflow-deck-automation-personal-settings.mjs
while Util::addScript() was still asking for the unprefixed name. Nextcloud
found neither the script nor the style, so only the empty mount div rendered
and the settings page stayed blank.

Shorten the entry to "personal-settings" and pass the full on-disk basename
(APP_ID . '-personal-settings') to addScript()/addStyle(). Document the
prefix rule and the intentionally near-empty CSS entry stub in CLAUDE.md.
This commit is contained in:
Patrick Niebeling
2026-08-13 13:38:38 +02:00
parent c5bf6f8f0d
commit d2f6640d3d
3 changed files with 8 additions and 3 deletions
+2
View File
@@ -78,6 +78,8 @@ None of these were discoverable locally — there's no npm here (see "Local-only
- **`package.json` needs `"type": "module"`.** `vite.config.js` uses `import`/`export` syntax and `@nextcloud/vite-config` is ESM-only; without `"type": "module"`, Node treats `.js` as CommonJS and `vite build` fails trying to `require()` an ESM-only package.
- **A `tsconfig.json` must exist at the repo root, even though this project has no TypeScript source.** `@nextcloud/vite-config`'s `index.js` barrel statically re-exports `createLibConfig` from `libConfig.js`, which imports `vite-plugin-dts` at module scope — that import chain runs just from importing `createAppConfig`, regardless of whether `createLibConfig` is ever called. The minimal `tsconfig.json` in this repo exists to give that a config to resolve, not because we write TypeScript. On its own this did **not** fix the crash below — see the next bullet.
- **`typescript` must be an explicit devDependency.** `vite-plugin-dts` (pulled in transitively by the bullet above, version `^4.5.4` as of `@nextcloud/vite-config@2.5.4`) peer-depends on `typescript: "*"` but doesn't install it itself. Without a `typescript` devDependency in our own `package.json`, nothing provides that package, and `vite-plugin-dts`'s `@volar/typescript` integration crashes at module-load time — before `vite.config.js`'s own code or `tsconfig.json` are ever consulted — with `Cannot read properties of undefined (reading 'useCaseSensitiveFileNames')` (`proxyCreateProgram`). This is the actual fix; `tsconfig.json` existing is necessary but not sufficient. Keep `typescript` reasonably close to the version `@nextcloud/vite-config` itself develops against (currently `^5.9.3`) if you bump either.
- **`createAppConfig` prefixes every entry name with the app id**, so the entry `personal-settings` is emitted as `js/workflow_deck_automation-personal-settings.mjs` and `css/workflow_deck_automation-personal-settings.css`. `Util::addScript()`/`addStyle()` take that *full on-disk basename* (minus extension), not the bare entry name — `lib/Settings/Personal.php` therefore passes `Application::APP_ID . '-personal-settings'`. Getting this wrong produces a **silently blank settings page**: the template's empty mount `<div>` renders fine, and the only symptom is `Could not find resource workflow_deck_automation/js/….js to load` (`jsresourceloader`) plus a matching `Could not find resource file "/apps/workflow_deck_automation/css/….css"` in `nextcloud.log`. If you rename the entry in `vite.config.js`, rename it in `Personal.php` too.
- **The bulk of the CSS lives in a hashed `*.chunk.css`**, loaded at runtime by the `.mjs` bundle (`cssCodeSplit: true`). The `css/workflow_deck_automation-personal-settings.css` that `addStyle()` points at is the ~100-byte stub produced by `createEmptyCSSEntryPoints: true`. A near-empty entry CSS file is expected — don't "fix" it by turning off code splitting.
## Local-only notes
+3 -2
View File
@@ -11,8 +11,9 @@ use OCP\Util;
class Personal implements ISettings {
public function getForm(): TemplateResponse {
Util::addScript(Application::APP_ID, 'workflow-deck-automation-personal-settings');
Util::addStyle(Application::APP_ID, 'workflow-deck-automation-personal-settings');
// The bundle names carry the app-id prefix that @nextcloud/vite-config adds.
Util::addScript(Application::APP_ID, Application::APP_ID . '-personal-settings');
Util::addStyle(Application::APP_ID, Application::APP_ID . '-personal-settings');
return new TemplateResponse(Application::APP_ID, 'settings/personal', [], '');
}
+3 -1
View File
@@ -1,7 +1,9 @@
import { createAppConfig } from '@nextcloud/vite-config'
export default createAppConfig({
'workflow-deck-automation-personal-settings': 'src/main.js',
// @nextcloud/vite-config prefixes every entry with the app id, so this
// emits js/workflow_deck_automation-personal-settings.mjs
'personal-settings': 'src/main.js',
}, {
createEmptyCSSEntryPoints: true,
config: {