Page titles for Hilla views are shown incorrectly in production mode

[mshabarov]

Description of the bug

Page titles for Hilla views are shown incorrectly, e.g. "C T" instead of "Public page", see attached screenshot:

Prod mode

Dev mode

and that happens in production mode only.

Looks similar to https://github.com/vaadin/hilla/issues/2318.

Flow titles are shown correctly.

Expected behavior

Titles are shown as they defined with ViewConfig.

Minimal reproducible example

Checkout https://github.com/vaadin/flow-hilla-hybrid-example/pull/47 and run mvn spring-boot:run -Pproduction, then open localhost:8080, login with user/user, navigate to any Hilla view.

Versions

• Vaadin / Flow version: 24.4.0.rc1

[platosha]

Cannot reproduce here, the title shows up correctly:

When looking though the bundled JS, the page title is preserved with explicit Object.defineProperty():

[mshabarov]

Apparently I had this issue because of some old JS files for TSX views. After remove and rebuild the issue is gone.

[stefanuebe]

@mshabarov

I have the same issue, can you specifiy, where these old JS files where located? And have you deleted them manually? Since that seems to be reproducible somehow, the deletion of these old js files on production build should maybe be automated?

[stefanuebe]

It seems that the usage of the useViewConfig() hook is broken in production mode, when the view has no title configured via view config.

@platosha

Here is a way to reproduce it 🙂

1. Download a starter with hilla view
2. add the useViewConfig() hook, get the title. Apply it for instance to the document.title
3. Now add a second with a view config, incl a title.
4. Build the app in production mode and deploy it (I deployed it as WAR, using the SpringBootServletInitializer and an external Tomcat 10).
5. Open the no config view. The title should be broken.
6. Open the view with config. The title should be shown correctly.

Broken Title:

import {useEffect} from 'react';
import {useViewConfig} from "@vaadin/hilla-file-router/runtime.js";

export default function NoConfigView() {
    const currentTitle = useViewConfig()?.title ?? 'My App';

    useEffect(() => {
        document.title = currentTitle;
    }, [currentTitle]);

    return (
        <span>this has no config</span>
    );

}

Working Title:

import {ViewConfig} from '@vaadin/hilla-file-router/types.js';
import {useViewConfig} from "@vaadin/hilla-file-router/runtime.js";
import {useEffect} from "react";

export const config: ViewConfig = {
    title: 'A specific title'
};

export default function ConfigViewView() {

    const currentTitle = useViewConfig()?.title ?? 'My App';

    useEffect(() => {
        document.title = currentTitle;
    }, [currentTitle]);

    return (
        <span>this has a config</span>
    );
}

Therefore this issue should be reopened.

Workaround Define view titles using the view config