Error: TimeoutException Future not completed And TypeError: T.as is not a function at _Future.new.[_setValue] - firebase-storage

Question

I got this error while dealing with Flutter web and Firebase Storage:
Error: TimeoutException after 0:00:05.000000: Future not completed
at Object.createErrorWithStack (http://localhost:65534/dart_sdk.js:4478:12)
at Object._rethrow (http://localhost:65534/dart_sdk.js:37394:16)
at async._AsyncCallbackEntry.new.callback (http://localhost:65534/dart_sdk.js:37388:13)
Then followed by this error (always in pairs)
TypeError: T.as is not a function
at _Future.new.[_setValue] (http://localhost:60098/dart_sdk.js:32317:11)
at Function._propagateToListeners (http://localhost:60098/dart_sdk.js:32660:30)
at async._AsyncCallbackEntry.new.callback (http://localhost:60098/dart_sdk.js:32357:27)
at Object._microtaskLoop (http://localhost:60098/dart_sdk.js:37220:13)
at _startMicrotaskLoop (http://localhost:60098/dart_sdk.js:37226:13)
at http://localhost:60098/dart_sdk.js:32848:9
I have spent the whole 2 days to figure out where this comes from.
So far with the best of my knowledge it seems to come from when I upload an image to Firebase Storage:
Here is the code:
final uploadTask = _storageRef.child(_path).put(_file,
fb.UploadMetadata(
contentType: _file.type, customMetadata: customMetaData));
// Listening to the progress.
final StreamSubscription<fb.UploadTaskSnapshot> stream =
uploadTask.onStateChanged.listen((event) => event);
stream.onDone(() {
uploadTask.cancel();
stream.cancel();
});
And just in case someone asks, here's my flutter doctor -v
[✓] Flutter (Channel dev, 1.20.0-0.0.pre, on Mac OS X 10.15.5 01, locale
en-US)
• Flutter version 1.20.0-0.0.pre at /Applications/flutter
• Framework revision d9653445f4 (7 days ago), 2020-06-09 18:43:03 -0400
• Engine revision e8c13aa012
• Dart version 2.9.0 (build 2.9.0-14.0.dev 5c1376615e)
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
• Android SDK at /Applications/Android/sdk
• Platform android-29, build-tools 29.0.3
• ANDROID_HOME = /Applications/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.4.1, Build version 11E503a
• CocoaPods version 1.9.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 47.0.2-dev.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build
1.8.0_242-release-1644-b3-6222593)
[✓] VS Code (version 1.46.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.11.0
[✓] Connected device (2 available)
• Web Server • web-server • web-javascript • Flutter Tools
• Chrome • chrome • web-javascript • Google Chrome 83.0.4103.106
• No issues found!
Any help is appreciated. Thank you

Answer 1

I just encountered this issue too; it seems to be caused by some quirk in the JS-interop feature of dart (I created an issue in dart-lang/sdk attempting to get some clarification!)
The root cause of this particular problem was an issue with the internal implementation of the onStateChanged Stream in the UploadTask class, here.
The original code was defining the onCompletion callback of the UploadTask as:
var onCompletion = allowInterop(() => _changeController.close());
But whatever .close() was returning was unexpected in the js-interop layer and causing this crash, so I replaced it by:
var onCompletion = allowInterop(() {
_changeController.close();
});
Which did the trick, at least on the firebase_storage_web plugin I'm working on!
The fix has been published as firebase:^7.3.1
PS: Looking at the package:firebase code, I bet the OP wouldn't have any issues if they used uploadTask.future, instead of uploadTask.onStateChanged, but of course you can't have upload progress then. Docs.