Flutter web exception caught by widget library (but only in debug). "Cannot read properties of undefined..."

Question

We have a strange error that occurs intermittently in our Flutter Web app. When I say intermittent, I mean when you run the app through "flutter run -d chrome" 50% of the time it will work, and 50% of the time the app will halt with this error:

"The following JSNoSuchMethodError was thrown building _ScaffoldMessengerScope: TypeError: Cannot read properties of undefined (reading 'AnimationController')"

I bolded the "AnimationController" here because it is not always the same object. The object that errors out varies from run to run. And it's usually not the same object.

The other strange thing is that if I build the project and then deploy the build/web folder to a web server, and load the app from there, the error does not occur. This is a problem that happens strictly when executing "flutter run -d chrome". It happens on every engineer's machine too. Some of us run Macs and some are on Windows. Everyone has the same issue, although not everyone has it at the same frequency. Some see it happen once or twice an hour, and others see it almost every run.

Doing a "flutter clean" does not solve the problem.

We thought the issue could be related to our use of firebase through the Flutterfire package because we saw there were some related issues posted by other users on Stackoverflow. But so far updating the package, re-installing the package, and commenting out the firebase script inclusions in the index.html do not seem to solve the issue.

Flutter doctor output seems nominal as well:

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-US)
    • Flutter version 2.8.1 at /Users/hreddy/Code/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (5 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/hreddy/Library/Android/sdk
    • Platform android-31, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 2020.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
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

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

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 97.0.4692.99

• No issues found!

The full output when the error occurs is as follows (you can see in this run it again occurred for a different random object):

TypeError: Cannot read properties of undefined (reading 'FirebaseFirestoreWeb')
    at Object.registerPlugins (http://localhost:4999/packages/wiijii_visuals/generated_plugin_registrant.dart.lib.js:27:25)
    at main (http://localhost:4999/web_entrypoint.dart.lib.js:31:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:4999/dart_sdk.js:40211:34)
    at Object._async [as async] (http://localhost:4999/dart_sdk.js:40242:7)
    at main$ (http://localhost:4999/web_entrypoint.dart.lib.js:30:18)
    at http://localhost:4999/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:4999/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:4999/dwds/src/injected/client.js:8709:21)
    at http://localhost:4999/dwds/src/injected/client.js:23792:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:4999/dwds/src/injected/client.js:3511:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:4999/dwds/src/injected/client.js:11510:12)
    at Object._asyncStartSync (http://localhost:4999/dwds/src/injected/client.js:3475:20)
    at main__closure3.$call$body$main__closure (http://localhost:4999/dwds/src/injected/client.js:23804:16)
    at main__closure3.call$1 (http://localhost:4999/dwds/src/injected/client.js:23731:19)
    at StaticClosure._rootRunUnary (http://localhost:4999/dwds/src/injected/client.js:3873:18)
    at _CustomZone.runUnary$2$2 (http://localhost:4999/dwds/src/injected/client.js:12858:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:4999/dwds/src/injected/client.js:12805:14)
    at _ForwardingStreamSubscription._sendData$1 (http://localhost:4999/dwds/src/injected/client.js:12395:19)
    at _ForwardingStreamSubscription._add$1 (http://localhost:4999/dwds/src/injected/client.js:12341:15)
    at _ForwardingStreamSubscription._add$1 (http://localhost:4999/dwds/src/injected/client.js:12674:12)
    at _MapStream._handleData$2 (http://localhost:4999/dwds/src/injected/client.js:12735:12)
    at _ForwardingStreamSubscription._handleData$1 (http://localhost:4999/dwds/src/injected/client.js:12700:20)
    at BoundClosure.eval (eval at Closure_forwardCallTo (http://localhost:4999/dwds/src/injected/client.js:1439:14), <anonymous>:3:44)
    at StaticClosure._rootRunUnary (http://localhost:4999/dwds/src/injected/client.js:3873:18)
    at _CustomZone.runUnary$2$2 (http://localhost:4999/dwds/src/injected/client.js:12858:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:4999/dwds/src/injected/client.js:12805:14)
    at _ControllerSubscription._sendData$1 (http://localhost:4999/dwds/src/injected/client.js:12395:19)
    at _ControllerSubscription._add$1 (http://localhost:4999/dwds/src/injected/client.js:12341:15)
    at _SyncStreamController._sendData$1 (http://localhost:4999/dwds/src/injected/client.js:12189:32)
    at _SyncStreamController.add$1 (http://localhost:4999/dwds/src/injected/client.js:12070:15)
    at BoundClosure.eval (eval at Closure_forwardInterceptedCallTo (http://localhost:4999/dwds/src/injected/client.js:1519:14), <anonymous>:3:45)
    at StaticClosure._rootRunUnary (http://localhost:4999/dwds/src/injected/client.js:3873:18)
    at _CustomZone.runUnary$2$2 (http://localhost:4999/dwds/src/injected/client.js:12858:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:4999/dwds/src/injected/client.js:12805:14)
    at _ControllerSubscription._sendData$1 (http://localhost:4999/dwds/src/injected/client.js:12395:19)
    at _ControllerSubscription._add$1 (http://localhost:4999/dwds/src/injected/client.js:12341:15)
    at _SyncStreamController._sendData$1 (http://localhost:4999/dwds/src/injected/client.js:12189:32)
    at _SyncStreamController.add$1 (http://localhost:4999/dwds/src/injected/client.js:12070:15)
    at _GuaranteeSink.add$1 (http://localhost:4999/dwds/src/injected/client.js:23287:25)
    at HtmlWebSocketChannel_closure1.call$1 (http://localhost:4999/dwds/src/injected/client.js:23556:149)
    at _EventStreamSubscription_closure.call$1 (http://localhost:4999/dwds/src/injected/client.js:17826:26)
    at StaticClosure._rootRunUnary (http://localhost:4999/dwds/src/injected/client.js:3879:16)
    at _CustomZone.runUnary$2$2 (http://localhost:4999/dwds/src/injected/client.js:12858:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:4999/dwds/src/injected/client.js:12805:14)
    at _CustomZone_bindUnaryCallbackGuarded_closure.call$1 (http://localhost:4999/dwds/src/injected/client.js:12995:25)
    at invokeClosure (http://localhost:4999/dwds/src/injected/client.js:1262:26)
    at WebSocket.<anonymous> (http://localhost:4999/dwds/src/injected/client.js:1281:18)

Any idea what direction we should investigate further?

Answer 1

The solution for me is when I first run the flutter app on my IDE, I hit the refresh button on the browser where the app runs and won't encounter it again until I close my IDE.