[Web] App builds successfully, but then: "The type 'JSObject' can't be used as supertype."

[IvanDeluxe]

Steps to reproduce

Hi :)

We have an app in production currently running 3.16.9 & now after upgrading to latest flutter I can't seem to run the app:

flutter upgrade (3.16.9 => 3.19.0)
flutter pub get
flutter pub run build_runner build --delete-conflicting-outputs
VS Code => Run Without Debugging

Actual results

The Debug Console is full of errors like:

Logs

Logs

Launching lib\main.dart on Chrome in debug mode...
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/accelerometer.dart:52:45: Error: The type 'JSObject' can't be used as supertype.
class AccelerometerReadingValues implements JSObject {
                                            ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/ambient_light.dart:22:44: Error: The type 'JSObject' can't be used as supertype.
class AmbientLightReadingValues implements JSObject {
                                           ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/anchors.dart:11:27: Error: The type 'JSObject' can't be used as supertype.
class XRAnchor implements JSObject {}
                          ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/anchors.dart:21:30: Error: The type 'JSObject' can't be used as supertype.
class XRAnchorSet implements JSObject {}
                             ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/angle_instanced_arrays.dart:11:41: Error: The type 'JSObject' can't be used as supertype.
class ANGLE_instanced_arrays implements JSObject {
                                        ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/attribution_reporting_api.dart:9:49: Error: The type 'JSObject' can't be used as supertype.
class HTMLAttributionSrcElementUtils implements JSObject {}
                                                ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/attribution_reporting_api.dart:20:53: Error: The type 'JSObject' can't be used as supertype.
class AttributionReportingRequestOptions implements JSObject {
                                                    ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/audio_output.dart:10:37: Error: The type 'JSObject' can't be used as supertype.
class AudioOutputOptions implements JSObject {
                                    ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/background_fetch.dart:17:41: Error: The type 'JSObject' can't be used as supertype.
class BackgroundFetchManager implements JSObject {}
                                        ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/background_fetch.dart:32:43: Error: The type 'JSObject' can't be used as supertype.
class BackgroundFetchUIOptions implements JSObject {
                                          ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/background_fetch.dart:86:40: Error: The type 'JSObject' can't be used as supertype.
class BackgroundFetchRecord implements JSObject {}
                                       ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/background_sync.dart:11:30: Error: The type 'JSObject' can't be used as supertype.
class SyncManager implements JSObject {}
                             ^
../../../../AppData/Local/Pub/Cache/hosted/pub.dev/web-0.3.0/lib/src/dom/badging.dart:9:33: Error: The type 'JSObject' can't be used as supertype.
class NavigatorBadge implements JSObject {}
                                ^

Flutter Doctor output

Doctor output

[√] Flutter (Channel stable, 3.19.0, on Microsoft Windows [Version 10.0.22631.3155], locale hr-HR)
    • Flutter version 3.19.0 on channel stable at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (2 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[√] Windows Version (Installed version of Windows is version 10 or higher)

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at C:\Users\ivan7\AppData\Local\Android\sdk
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop Windows apps
    X Visual Studio not installed; this is necessary to develop Windows apps.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components  

[√] Android Studio (version 2021.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.13+0-b1751.21-8125866)

[√] VS Code (version 1.86.2)
    • VS Code at C:\Users\ivan7\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.82.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.3155]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 121.0.6167.185
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 121.0.2277.112

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

! Doctor found issues in 2 categories.

[IvanDeluxe]

Just to add, I've googled this issue & it seems to usually come from importing dart:js if I gather correctly -- we don't have this import anywhere in the codebase :))

Any help is appreciated, thanks!

[IvanDeluxe]

I've also tried running flutter clean, even dart pub cache clean, but it didn't help :(

[Constans]

Same issue here with 3.19.0 in IntelliJ IDEA.

[geminiyellow]

same error here, i try to run at macos/ios/android , all platform success, but web.
and i try to upgrade it from 0.3, 0.4, 0.4.1, 0.4.2 not working, and 0.5.0 not support firebase.

and downgrade to 3.16.9 all thing works

These packages are no longer being depended on:
- leak_tracker 10.0.0
- leak_tracker_flutter_testing 2.0.1
- leak_tracker_testing 2.0.1
- vm_service 13.0.0

what is happend?

[amrgetment]

@IvanDeluxe does my fix work for you?
I use Firebase auth that's why I got a similar issue, firebase auth web max supports web:0.4.2 so if you used web:0.5.0 it will crash

firebase/flutterfire#12291 (comment)

[Constans]

I use firebase auth too, so probably this causes the issue.

[amrgetment]

Firebase auth web doesn't work for web 0.3 or 0.5 only 0.4.2
web: '>=0.3.0 <0.5.0'
https://github.com/firebase/flutterfire/blob/9d5480f8f943d095dd3ca94d4868ec75bed84b22/packages/firebase_auth/firebase_auth_web/pubspec.yaml#L22C1-L23C1

[amaury901130]

Same issue, was after flutter upgrade
@geminiyellow downgrade to 3.16.9 , works for me,
but this should not be the final solution.

What is strange in amplify works fine with the stable channel. 🫣

[7rkl]

In my case, the app works fine locally after I downgrade. but it shows the errors on Netlify when trying to deploy!

any advice?

[rebindev]

Same issue after upgrading to 3.19.0

[gabdsg]

flutter pub upgrade worked for me

[Hippopop]

Faced this issue on Flutter Web. After upgrading to 3.19. But cleaning pub cache and upgrading all the dependencies resolved it.

[valdosouza]

flutter pub upgrade worked for me

[ronaldichandra]

flutter pub upgrade

[picobellone]

Faced this issue on Flutter Web.
I upgraded pubspec.yaml to web 0.4.2
After that 'flutter build web' is ok and the app works on line (on the web server).
Still doesn't work debugging in VSC.
App hangs before showing the home screen.