Hard refresh in multi path URL (subpath) loads main.dart.js from last segment - 1

[SteveShaw9899]

Steps to reproduce

I have a flutter web application with a robust set of routes utilizing the native Navigation and the Fluro routing package. Navigation works as expected within the application. However, a hard refresh (browser refresh) can cause the main.dart.js to be loaded from the wrong path.

So if I navigate to a subpath http://localhost:9506/inventory/99999, it will attempt to load main.dart.js from "http://localhost:9506/inventory/" and consequently fail (because in our web server it's at root).

It seems that flutter is stripping the last segment off the path and then using that to load the main.dart.js file as opposed to the root of the domain.

I know there is a setting in the web index.html for base href via $FLUTTER_BASE_HREF. If I set this explicitly to the localhost:9506

Note: this is specific to Flutter 3.24.0. This only started occurring after our upgrade and this worked fine in Flutter 3.23.x

Expected results

main.dart.js should be loaded from the root domain always and be agnostic to the current subpath of the URL.

Actual results

Navigating to a subpath http://localhost:9506/inventory/99999, it will attempt to load main.dart.js from "http://localhost:9506/inventory/" and consequently fail (because in our web server it's at root).

It seems that flutter is stripping the last segment off the path and then using that to load the main.dart.js file as opposed to the root of the domain.

Code sample

Code sample

[Paste your code here]

Screenshots or Video

Server response because main.dart.js is attempting to be loaded from the wrong path location

Logs

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.24.0, on macOS 14.5 23F79 darwin-arm64, locale en-CA)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/to/macos-android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2024.1.4)
[✓] VS Code (version 1.90.0)
[✓] Connected device (3 available)
! Error: Browsing on the local area network for Steven’s iPhone 13. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
The device must be opted into Developer Mode to connect wirelessly. (code -27)
[✓] Network resources

! Doctor found issues in 1 category.

[darshankawar]

Thanks for the report @SteveShaw9899
You mentioned Fluro which is third party package. I see a similar issue in it lukepighetti/fluro#287 that you can check to see if it applies to you as well or not. If not, please provide us a trimmed version of code sample (without third party package implementation) to see if it occurs or not.

[SteveShaw9899]

I don't think this has anything to do with Fluro. It has to do with loading of the main.dart.js file. I see this commit went into Flutter 3.24.0 that seems relevant: https://github.com/flutter/engine/pull/53231/files#diff-1e0014219bc14a11be37fda12d4671e58c777d06bc0658d8fc90e592cb9675b1

From what I can see it's directly related to the issue I described. See changes in lib/web_ui/flutter_js/src/entrypoint_loader.js

[SteveShaw9899]

There is a new config property: entrypointBaseUrl ?

[SteveShaw9899]

actually there's a newer commit in the same file that looks more suspicious: flutter/engine@1c23c8f

There is a new method that loads the main.dart.js: resolveUrlWithSegments that is using document.baseURI instead of the href on the base object.

[SteveShaw9899]

seems that I can get past the issue by setting entryPointBaseUrl in the config to document.baseURI

i.e.

_flutter.loader.load({ config: { renderer: "html", entryPointBaseUrl: document.baseURI }, serviceWorker: { serviceWorkerVersion: {{flutter_service_worker_version}} } });

... but still feels like might be something actionable on the flutter side. This workaround shouldn't be necessary.

[SteveShaw9899]

side note: while refresh works with this workaround (in a multi-segment URL), the app is frozen after load. Unable to click on anything.

[darshankawar]

Thanks for the updates. Maybe it is similar to #153077 that you can check.

[SteveShaw9899]

Yes, I imagine 153077 is the same issue - at least problematic code area is exactly the same

[darshankawar]

Thanks for the update. Will close this in favor of the linked issue. Please follow-up per mentioned in that issue for further updates.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.