vaadin / hilla

Build better business applications, faster. No more juggling REST endpoints or deciphering GraphQL queries. Hilla seamlessly connects Spring Boot and React to accelerate application development.
https://hilla.dev
Apache License 2.0
904 stars 57 forks source link

Protected main layout produces errors in browser and blank page #2784

Open mshabarov opened 1 day ago

mshabarov commented 1 day ago

Describe the bug

Making the Hilla main layout protected by log in or role breaks my Hilla application: browser gives blank pages and these errors in the console:

console.error @ VM13:1Understand this error
VM13:1 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    at Navigate (http://localhost:8080/VAADIN/@fs/.../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:4434:5)
    at ProtectedRoute (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-BGQ2A2M6.js?v=aca9bcef:159:27)
    at RenderedRoute (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:4092:5)
    at RenderErrorBoundary (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:4052:5)
    at DataRoutes (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:5211:5)
    at Router (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:4474:15)
    at RouterProvider (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-CG4E2YN4.js?v=aca9bcef:5026:5)
    at AuthProvider (http://localhost:8080/VAADIN/@fs/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-BGQ2A2M6.js?v=aca9bcef:104:25)
    at PreconfiguredAuthProvider (http://localhost:8080/../flow-hilla-hybrid-example/node_modules/.vite/deps/chunk-BGQ2A2M6.js?v=aca9bcef:149:40)
    at App
console.error @ VM13:1Understand this error
chunk-CG4E2YN4.js?v=aca9bcef:345 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Object.replace2 [as replace] (chunk-CG4E2YN4.js?v=aca9bcef:345:19)
    at completeNavigation (chunk-CG4E2YN4.js?v=aca9bcef:1330:20)
    at handleLoaders (chunk-CG4E2YN4.js?v=aca9bcef:1716:7)
    at startNavigation (chunk-CG4E2YN4.js?v=aca9bcef:1547:15)
    at Object.navigate (chunk-CG4E2YN4.js?v=aca9bcef:1433:18)
    at chunk-CG4E2YN4.js?v=aca9bcef:4379:14
    at chunk-CG4E2YN4.js?v=aca9bcef:4459:25
    at commitHookEffectListMount (chunk-E4UNORPT.js?v=aca9bcef:16915:34)
    at commitPassiveMountOnFiber (chunk-E4UNORPT.js?v=aca9bcef:18156:19)
    at commitPassiveMountEffects_complete (chunk-E4UNORPT.js?v=aca9bcef:18129:17)Understand this error

The reason seems to be that the project has @layout.tsx and login.tsx in the same directory. If I move @layout.tsx and all views except login under subdirectory foo, this error doesn't happen and access restriction on layout level do work properly.

Most likely the file-system router gets into an infinite loop because of infinite redirects from layout to login and back, but this is just a guess.

Expected-behavior

Hilla allows to add access control restriction to main layout for simple case, when it's in the same folder than other views.

Reproduction

Add

export const config: ViewConfig = {
    loginRequired: true
};

into this layout https://github.com/vaadin/flow-hilla-hybrid-example/blob/v24/src/main/frontend/views/%40layout.tsx, start the project navigate to localhost:8080 or localhost:8080/login

System Info

Vaadin 24.5.0.beta3

platosha commented 1 day ago

Related: would be nice to have the skipLayouts feature, it might work as a workaround here. See #2385.