Master details layout import

Hilla
1

Hi,
I was trying to use the master detail layout but I can’t seem to find the right import. I’ve added the feature flag, and during application startup I correctly see this in the logs:

2025-05-28T09:52:21.274Z  INFO 32647 --- [OPF] [  restartedMain] c.v.f.s.DefaultDeploymentConfiguration   : 
Vaadin is running in DEVELOPMENT mode - do not use for production deployments.

The following feature previews are enabled:
- Hilla Full-stack Signals
- Master Detail Layout component

then in my component I have the following:

import {
    GridDataProvider,
    GridDataProviderCallback,
    GridDataProviderParams,
    SplitLayout,
    MasterDetailLayout
} from '@vaadin/react-components';

but it fails to find the MasterDetailLayout component giving the error:

 ERROR(TypeScript)  Module '"@vaadin/react-components"' has no exported member 'MasterDetailLayout'.
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :  FILE  /home/ansible/osm/src/main/frontend/components/ci_explorer.tsx:8:5
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :      6 |     GridDataProviderParams,
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :      7 |     SplitLayout,
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :   >  8 |     MasterDetailLayout
2025-05-28T09:58:05.432Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :        |     ^^^^^^^^^^^^^^^^^^
2025-05-28T09:58:05.433Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :      9 | } from '@vaadin/react-components';
2025-05-28T09:58:05.433Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :     10 | import CIFolder from "Frontend/generated/gal/gcs/opf/ccif/jpa/entities/CIFolder";
2025-05-28T09:58:05.433Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   :     11 | import CiList from "Frontend/components/CiList";
2025-05-28T09:58:05.433Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   : 
2025-05-28T09:58:05.433Z  INFO 32647 --- [OPF] [v-server-output] c.v.b.devserver.DevServerOutputTracker   : [TypeScript] Found 1 error. Watching for file changes.

what am I doing wrong? I’ve also tried a gradle clean, but nothing. I’m using vaadin 24.7.5

thanks
Fernando

2

The component is going to be released with 24.8, it’s not in 24.7.

3

understood thanks!
indeed it works if I use the prerelease version!

As a side note, in my use case I have to grid wrapped in <ContextMenu /> component. It works fine in the Detail section but in the Master section the grid disappear.