Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
FabianEhr opened this issue Sep 9, 2024 · 21 comments
Closed

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

FabianEhr opened this issue Sep 9, 2024 · 21 comments

Comments

@FabianEhr
Copy link

FabianEhr commented Sep 9, 2024

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
Copy link
Contributor

knoobie commented Sep 9, 2024

Did you try the latest version?

@mcollovati
Copy link
Collaborator

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
Copy link
Contributor

tepi commented Sep 9, 2024

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 FabianEhr changed the title Browser back navigation not working on 24.4.3 Browser back navigation not working on 24.4.11 Sep 11, 2024
@FabianEhr
Copy link
Author

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
Copy link
Author

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

@tepi tepi changed the title Browser back navigation not working on 24.4.11 Browser back navigation not working on 24.4.11 (on react-router) Sep 12, 2024
@tepi tepi reopened this Sep 12, 2024
@tepi
Copy link
Contributor

tepi commented Sep 12, 2024

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

@simasch
Copy link

simasch commented Sep 13, 2024

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
Copy link
Contributor

knoobie commented Sep 13, 2024

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

@simasch
Copy link

simasch commented Sep 13, 2024

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
Copy link
Member

Legioth commented Sep 13, 2024

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
Copy link
Contributor

tepi commented Sep 13, 2024

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
Copy link
Contributor

tepi commented Sep 13, 2024

Created #19951 for tracking the issue above.

@simasch
Copy link

simasch commented Sep 13, 2024

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
Copy link
Member

Legioth commented Sep 13, 2024

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
Copy link

simasch commented Sep 13, 2024

Yes with 24.4.11 it works

caalador added a commit that referenced this issue Sep 17, 2024
When checking for react enable
also look if we have a application.properties
with the vaadin.react.enable flag.

Touches #19951 and #19911
caalador added a commit that referenced this issue Sep 17, 2024
When checking for react enable
also look if we have a application.properties
with the vaadin.react.enable flag.

Touches #19951 and #19911
@tepi
Copy link
Contributor

tepi commented Sep 18, 2024

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
Copy link
Contributor

knoobie commented Sep 18, 2024

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
Copy link
Contributor

tepi commented Sep 18, 2024

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
Copy link
Contributor

tepi commented Sep 19, 2024

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.

@bwajtr
Copy link
Contributor

bwajtr commented Sep 27, 2024

I still have problems with UI.navigate() not changing location in the browser, created a bug for that too:
#20077

@tepi
Copy link
Contributor

tepi commented Sep 30, 2024

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.

Closing this for now since it's been two weeks with no response concerning the original issue. If the problem still persists, please open a new issue with instructions on how to reproduce the issue.

The somewhat related issue #20077 will remain open.

@tepi tepi closed this as not planned Won't fix, can't repro, duplicate, stale Sep 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Development

No branches or pull requests

8 participants