Browser back navigation not working on 24.4.11 (on react-router)

[FabianEhr]

Description of the bug

After upgrading to Vaadin 24.4.3 and disabling the vaadin-react feature within the properties the browser back navigation isn't working. The following error can be aquiered from the developer console.

Errorlog
indexhtml-C98SXJYq.js:62437 You are trying to use a blocker on a POP navigation to a location that was not created by @remix-run/router. This will fail silently in production. This can happen if you are navigating outside the router via window.history.pushState/window.location.hash instead of using router navigation APIs. This can also happen if you are using createHashRouter and the user manually changes the URL.

Expected behavior

The browser back navigation should work.

Minimal reproducible example

Currently we got no time to provide a example project.
We demonstrated the bug to Sascha Merkel and Sebastian Kühnau today.

Versions

• Vaadin / Flow version: 24.3.13 -> 24.4.3 & also 24.4.11
• Java version: 17
• OS version: Windows 11 and Ubuntu 24
• Browser version (if applicable): Chrome Version 128.0.6613.120
• Application Server (if applicable): Wildfly 30.0.0
• IDE (if applicable): IntelliJ IDEA 2024.1.4 (Ultimate Edition) Build #IU-241.18034.62

[knoobie]

Did you try the latest version?

[mcollovati]

Looking at the error mentioning @remix-run/router, it seems react-router has not been disabled.
Please try to clean the project with mvn clean clean:frnontend and make sure vaadin-router is used.

Also, as Knoobie pointed out, Vaadin 24.4.3 is a bit old, the latest version is 24.4.11; several fixes have been released since 24.4.3.

[tepi]

There are currently some timing/async related issues when using react router with the latest Vaadin versions. We are working on the issues but solution is not there yet. For now, if you can, change to using vaadin router, that should resolve the issues.

[FabianEhr]

We upgraded the version to 24.4.11 as recommended. The problem still exists on that version.
Also we checked that the react-router is disabled and performed several clean-installs which had no effect on the result.

We try to assemble a demo project which has show cases the error.

[FabianEhr]

Issue can be closed.
The project had a secondary property which enabled the react-routing again.

[tepi]

Reopening this for us since it's still an issue on react-router

[simasch]

Even if I disable React with

vaadin.react.enable=false

this happens.

Now I have to move back to 24.3 because of this issue. Please fix ASAP. This is a huge blocker!

[knoobie]

Might be related to the upgrade of the react router - 0bfacf5 - in 24.4.10 I don't have such problem.

[simasch]

To reproduce:

ViewA -> ViewB -> History back View A -> View B -> History Back no longer works (the browser is updating the title but the navigation does not happen)

[Legioth]

The project had a secondary property which enabled the react-routing again.

@FabianEhr Could you share details on that so that others can also see if they have something similar that prevents vaadin.react.enable=false from having the intended impact?

[tepi]

Just did a quick test with simple Flow+SpringBoot application downloaded from start.vaadin.com.

First I ran the application as-is, it runs and confirmed react-router is used.

Then I set vaadin.react.enable=false in application.properties and restarted the application. This leads into exception in vite:

ERROR(TypeScript)  Cannot find module 'react-router-dom' or its corresponding type declarations.
FILE  /Users/tepi/Downloads/skeleton-starter-flow-spring-24 2/src/main/frontend/generated/vaadin.ts:42:24

   40 | applyTheme(document);
   41 |
 > 42 | import { Outlet } from 'react-router-dom';
      |                        ^^^^^^^^^^^^^^^^^^
   43 | (window as any).Vaadin ??= {};
   44 | (window as any).Vaadin.copilot ??= {};
   45 | (window as any).Vaadin.copilot._ref ??= {};

After this I ran mvn vaadin:clean-frontend and restarted the app. App runs without errors and I confirmed vaadin-router is being used.

So at least the most basic case seems to work. That said, we'd really need some input on how to actually reproduce the issue of react still hanging there once it has been disabled, to be able to fix the issue.

[tepi]

Created #19951 for tracking the issue above.

[simasch]

Disabling must be added to the plugin. With only the property it doesn't work in my case.

<plugin>
   <groupId>com.vaadin</groupId>
   <artifactId>vaadin-maven-plugin</artifactId>
   <executions>
    <execution>
      <goals>
        <goal>build-frontend</goal>
      </goals>
      <phase>compile</phase>
    </execution>
  </executions>
  <configuration>
    <!--  Disables "react router", which brings no features for flow app, but grows the front-end bundle -->
    <reactEnable>false</reactEnable>
    <!-- Make sure a custom bundle is created, otherwise the default prod bundle might contain various React related features. -->
    <forceProductionBuild>true</forceProductionBuild>
  </configuration>
</plugin>

[Legioth]

Disabling must be added to the plugin. With only the property it doesn't work in my case.

Does this mean that you got it to work with some recent 24.4 version after applying the config through the plugin?

[simasch]

Yes with 24.4.11 it works

[tepi]

Status update: Unfortunately latest version of react-router did not fix the original issue. We are currently investigating a way to fix this in Flow. Will update once we have something.

[knoobie]

Just to confirm: It's a regression in the react-router, right? Looking at 24.4.10 (I'm using) with an older version then 24.4.11 - I don't observe such problems in production.

[tepi]

I'm not 100% sure. We still have no reproduce example or exact description on this ticket. Maybe the same issue as this: #19839? That one also has a sample project that reproduces the issue.

In any case we have timing/async issue on with react-router navigate on at least latest 24.4 version and 24.5 pre-releases, which we are currently trying to solve. Once a solution for that has been found, we'll go through any remaining issues.

Edit: I did test the procedure mentioned here in a simple test project a few days ago and that did work fine on latest 24.4.

[tepi]

Tried this again with a simple app with View A and View B. Navigating from A to B and then back using back button repeatedly seems to work fine with all tested combinations: Vaadin 24.4.10 and Vaadin 24.4.12, both with react router and vaadin router. Please find the test project attached below.

back-nav.zip

I'll mark the ticket as waiting for author for now, in case someone can provide a test project which reproduces the issue.