Error when running example on Flutter web

[bkioshn]

Report

I encountered an error when running the example from the RInf repository on the web.

Here is the error I received:

eferenceError: rinf is not defined
pkg/hub.js 619:70    __wbg_get_imports
pkg/hub.js 878:21    __wbg_init

The example works fine on iOS.

Seems like the problem occurs by the generated file generates from rinf wasm

I'm currently using
rustc 1.81.0
Flutter:

[✓] Flutter (Channel stable, 3.24.3, on macOS 15.0 24A335 darwin-arm64, locale en-TH)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/to/macos-android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[!] Xcode - develop for iOS and macOS (Xcode 16.0)
    ✗ Unable to get list of installed Simulator runtimes.
    ✗ CocoaPods not installed.
        CocoaPods is a package manager for iOS or macOS platform code.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/to/platform-plugins
      For installation instructions, see https://guides.cocoapods.org/using/getting-started.html#installation
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.94.1)
[✓] Connected device (3 available)
[✓] Network resources

[minikin]

I have the same error. @temeddix, any suggestions?

[temeddix]

Unfortunately I wan't able to reproduce the issue on macOS

The issue you've encountered should be related to the line below. When Flutter app is loaded on the web, Rinf makes a global rinf JavaScript object. Looks like this code wasn't working well, or running not early enough.

rinf/flutter_package/lib/src/load_web.dart

Line 40 in 1e662b8

window.rinf = { ...wasmBindings };

May I ask you if Dart's hot restart makes the app work?

[minikin]

@temeddix, thanks for the reply!
I also use macOS and tried to compile the example app in release mode and serve it with a web server. However, I encountered the same results. Anyway, I will provide more details tomorrow.

[poborin]

I'm facing the same issue on macOS. I tried a hot restart with no luck.

rustc 1.81.0

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.24.3, on macOS 14.0 23A344 darwin-arm64, locale en-AU)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.2)
[✓] VS Code (version 1.94.2)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

I tried both:

1. setup a new flutter project, add rinf and run. That works with the mac app, but not in the browser.
2. port fractal example to that project. That works with the mac app, but not in the browser.

in either cases the error was following:

A message on the flutter/lifecycle channel was discarded before it could be handled.
This happens when a plugin sends messages to the framework side before the framework has had an opportunity to register a listener. See the ChannelBuffers API documentation for
details on how to configure the channel to expect more messages, or to expect messages to get discarded:
  https://api.flutter.dev/flutter/dart-ui/ChannelBuffers-class.html
ReferenceError: rinf is not defined
pkg/hub.js 619:70    __wbg_get_imports
pkg/hub.js 878:21    __wbg_init
%3Canonymous%3E 2:7  <fn>

in fact, when I check hub.js I can see that there is no rinf being defined. And there is only one line that has rinf in it:

imports.wbg.__wbg_sendrustsignalextern_17d20de30a559742 = typeof rinf.send_rust_signal_extern == 'function' ? rinf.send_rust_signal_extern : notDefined('rinf.send_rust_signal_extern');

There is also a warning in the browser console that I'm not sure if it's related to rinf.

<meta name="apple-mobile-web-app-capable" content="yes"> is deprecated. Please include <meta name="mobile-web-app-capable" content="yes">

Is there anything I can help with? Perhaps provide more information or try something?

[temeddix]

Thank you @poborin :) I will test the web part as soon as possible just like the way you've described.

[temeddix]

Thank you, everyone. Your comments have been a big help in finding the error on the web. It looks like the behavior of wasm_bindgen has changed a little after 0.2.93. We are truly grateful.