[bug]: Navigate to a View with Arguments crashes WEB app when browser page is reloaded

MirzaCickusic commented 3 months ago

Describe the bug

I followed instructions from https://stacked.filledstacks.com/docs/getting-started/navigation-basics#navigate-to-a-view-with-arguments to implement the navigation with arguments to the stacked default starter code.

Here is what I changed:

Then run the app.

What operating system do you use?

macOS

Information about the installed tooling

fvm flutter doctor -v [✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-BA) • Flutter version 3.22.2 on channel stable at /Users/mirzacickusic/fvm/versions/3.22.2 • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (2 weeks ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/mirzacickusic/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/mirzacickusic/Library/Android/sdk/platform-tools • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 15C500b • CocoaPods version 1.14.3

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.90.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.90.0

[✓] Connected device (3 available) • macOS (desktop) • macos • darwin-arm64 • macOS 14.5 23F79 darwin-arm64 • Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.5 23F79 darwin-arm64 • Chrome (web) • chrome • web-javascript • Google Chrome 126.0.6478.63

[✓] Network resources • All expected network resources are available.

• No issues found!

Steps to reproduce the issue

Introduce the changes I mentioned above
run flutter web
after /home-view is shown, try reloading browser window
this is what happens:

A Dart VM Service on Chrome is available at: http://127.0.0.1:49985/VBBFZdBz72o=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:49985/VBBFZdBz72o=
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/stacked/src/router/route/route_data.dart 35:9                       argsAs
packages/test_web_app/app/app.router.dart 34:29                              <fn>
packages/stacked/src/router/controller/root_stack_router.dart 102:19         [_pageBuilder]
packages/stacked/src/router/controller/routing_controller.dart 1151:29       [_addEntry]
packages/stacked/src/router/controller/routing_controller.dart 1134:29       _pushAllGuarded
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/stacked/src/router/route/route_data.dart 35:9                       argsAs
packages/test_web_app/app/app.router.dart 34:29                              <fn>
packages/stacked/src/router/controller/root_stack_router.dart 102:19         [_pageBuilder]
packages/stacked/src/router/controller/routing_controller.dart 1151:29       [_addEntry]
packages/stacked/src/router/controller/routing_controller.dart 1134:29       _pushAllGuarded
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Expected behavior

App should reload to the /home-view without errors

Screenshots

No response

Additional Context

No response

MirzaCickusic commented 3 months ago

And in general, reloading is causing all kinds of routing issues for me on the web

For example; while my app is deployed on github pages. If I use "usePathUrlStrategy()" in my main.dart file, on browser refresh, github would show "404 Error The site configured at this address does not contain the requested file".

But when using "#" routing, everything works as expected on refresh.

FilledStacks commented 3 months ago

Interesting.

Could you please upload that example that you're referring to and link it here. IT'll be easier to test out.

Also, are you using the Stacked web template?

MirzaCickusic commented 3 months ago

Here it is: https://github.com/MirzaCickusic/test_stacked_web_app

But I'm not sure what you mean by web template. I was using this command to create this project:

stacked create app test_stacked_web_app --platforms web

FilledStacks commented 3 months ago

That's not using the web template, it's using a mobile first navigator.

To use the web template you can do

stacked create app my_web_app -t web

If you have an existing app and want to have better navigation on the web you can use the navigator2 implemention along with the new [RouterService](https://stacked.filledstacks.com/docs/stacked-router/routing-basics) instead of navigation service.

basil4240 commented 3 months ago

I am having same issue when I refresh a web page with arguments. The argument passed from previous page becomes null from on refresh. A workaround I did was to save each argument into local storage, and access if from the other view. This can quickly become unmanageable as the app gets bigger with lots of pages and arguments. Hoping to get a fix soon. Thanks...

MirzaCickusic commented 2 months ago

Unfortunately creating the web app with stacked create app my_web_app -t web and adding the same things I mentioned above, regarding the startingIndex, didn't fix the issue for me. Web still breaks on reload

@FilledStacks can you confirm that you are able to perform web reload successfully?

FilledStacks commented 3 weeks ago

@MirzaCickusic I can confirm web reload works for us as expected. We have logic to refetch all the data from the backend on refresh.

Stacked-Org / stacked