Javascript error: Invalid blocker state transition

[jcgueriaud1]

Description of the bug

When I'm navigating in my Vaadin application I have some javascript errors.

Uncaught (in promise) Error: Invalid blocker state transition: unblocked -> proceeding

Expected behavior

A javascript error should not appear in a normal case of usage.

Minimal reproducible example

Create a Vaadin application with two views in a menu, clicks multiple times on the menu.

I think the error appears when you click on the menu when the application is already navigating so if the view is really fast to load you need to click fast.

Versions

• Vaadin / Flow version: 24.5.2

[jcgueriaud1]

This might be connected: https://github.com/vaadin/copilot-internal/issues/3247

[mshabarov]

This looks like a misconfiguration or misusing of React's blocker function in Flow.tsx (ReactRouter/Flow integration).

[Lodin]

To me, this error looks like connected to the useBlocker hook. My first guess is that it somehow called multiple time that interrupts state change inside the blocker. So, it probably requires some debouncing 🤔

[mshabarov]

To me, this error looks like connected to the useBlocker hook

Exactly, this was what I meant.

[mcollovati]

Maybe a check is missing here in the serverConnected callback defintion

flow/flow-server/src/main/resources/com/vaadin/flow/server/frontend/Flow.tsx

Lines 405 to 413 in c4db041

	containerRef.current.serverConnected = (cancel) => {
	if (cancel) {
	blocker.reset();
	blockingPromise.resolve();
	} else {
	blocker.proceed();
	blockingPromise.resolve();
	}
	}

[caalador]

I guess the main issue here is that the sample layout uses <SideNav onNavigate={({ path }) => navigate(path!)} location={location}> which directly calls react navigate so it doesn't go to the queued navigation Flow uses. Doing a server side navigate I can not get the exception to happen, but can easily be gotten on a slow 4g network with the client sideNav.