[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.

[immadisairaj]

I also had a similar issue. Mine was mostly related to other package (which makes it transitive dependency).

As Rutvik suggested in twitter, try to override dependency and it works.

So, in all:

1. If you are using dart:html, try to migrate it to package:web. => https://dart.dev/interop/js-interop/package-web

2. If you are using web but old version, try to update it to the latest version.

3. If you are not using anything, try to update dependencies.

4. Even if 3 doesn't work (like me). Override the web dependency (for time being until the package you are using upgrades to latest web version)

dependency_overrides: 
  web: 0.5.0 # latest version as of now

[felipecastrosales]

Same issue here! Any news?

Reproduction:

• https://github.com/felipecastrosales/site

---

edit: flutter pub upgrade works as expected

[MeatCheatDev]

Same issue! Flutter pub cache repair followed by a flutter pub upgrade worked fine for me!

[WorkWithAfridi]

Same issue and can confirm it happened right after updating to 3.19. Running flutter pub upgrade solved it, for me.

[krishnaji-yedlapalli]

flutter pub upgrade worked for me

[huycozy]

I also hit this issue before (see dart-lang/web#137) but I see flutter pub upgrade can solve this. The fetched web version I had is 0.4.2:

  web:
    dependency: transitive
    description:
      name: web
      sha256: "4188706108906f002b3a293509234588823c8c979dc83304e229ff400c996b05"
      url: "https://pub.dev"
    source: hosted
    version: "0.4.2"

So, for anyone who is still facing this issue after executing flutter pub upgrade, could you please share the web version in pubspec.lock file?

[c-seeger]

can confirm flutter pub upgrade worked for the first impression, didn't found any side effects on my first test.

[techiehkr]

flutter pub upgrade worked for me!
but after run white screen app not working!

[Mehta2015]

Even I am facing the same issue after upgrading 3.19.0

[ankitmiyan30]

Run all these commands if you are running on the web.

RUN flutter doctor
RUN flutter channel stable
RUN flutter config --enable-web
RUN flutter upgrade
RUN flutter pub cache repair
RUN flutter clean
RUN flutter pub cache clean
RUN flutter pub upgrade
RUN flutter pub get
RUN flutter build web --web-renderer html --release --no-tree-shake-icons

[Constans]

My issues where fixed after the latest release of the firebase_auth package.

[geminiyellow]

My issues where fixed after the latest release of the firebase_auth package.

yes, after upgrade firebase_auth and pub upgrade, everything works.

[Lonti6]

flutter pub upgrade worked

[MeyerOppelt]

flutter pub upgrade worked for me! but after run white screen app not working!

@techiehkr
When you build for web, check your flutter.js in the build folder or check your browser console. I may be having the same issue where the screen is white and flutter.js is not loading.

[MeyerOppelt]

Ok! Ive figured out some of the issues. For me, using web 0.4.2 and 0.5.0 the flutter build does build without issue. Although, the flutter.js generator seems to be adding newlines directly to the flutter.js script, stopping the browser from loading the script.

Error in the firefox developer console:

Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: https://app.receiptengine.com/flutter.js
Source Map URL: flutter.js.map

When building my app, looking at flutter.js, it should all be in one line however it isnt.

Removing the extra newlines allows the page to load correctly.

Now, I have no idea how the flutter source code works, though here is my speculation. The update to flutter's web package 0.4.2 or 0.5.0 now inserts the newlines from the error directly into the built flutter.js script. Hence why some were unable to get their pages to load. Just speculation, someone would have to verify if this is the underlying issue, however the newlines in flutter.js is the error with the built version.

Here is the code in question at packages/flutter_tools/lib/src/web/file_generators/js/flutter.js:

if (!("serviceWorker" in navigator)) {
        let errorMessage = "Service Worker API unavailable.";
        if (!window.isSecureContext) {
          errorMessage += "\nThe current context is NOT secure."
          errorMessage += "\nRead more: https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts";
        }
        return Promise.reject(
          new Error(errorMessage)
        );
      }

I think removing the newlines manually is a good enough fix until a maintainer can remove the newlines from the code.

Well, nevermind I think you should just disreguard this comment. It seems that even without removing the newlines from the flutter.js script, my project just randomly started working. Worth a shot trying to fix it though.

[huycozy]

@MeyerOppelt Your issue doesn't seem to relate to the originally reported issue, it could be an implementation issue. If you think it's a Flutter framework issue, please file another issue with all information in the issue template so we can verify it properly.

Since the original issue reported can be solved by flutter pub upgrade, so I'm going to close this issue. If anyone still sees this issue even after executing this command, please write in comments. Thanks!

[johninquest]

I started getting this issue after upgrading to 3.19.0.

The issue went away after I ran => flutter pub upgrade --major-versions

[Abdulazizmia]

i solved this issue. just do this:
write this to your android studio terminal:
1. flutter clean
2. flutter upgrade
3. flutter pub get
4. flutter pub outdated
5. flutter pub upgrade
6. flutter run
now no issue found

[md-rifatkhan]

Solved by flutter pub upgrade

[pauljonescodes]

Just to understand the underlying cause, does this mean that even minor or patch upgrades to flutter are not guaranteed to be compatible with core dependencies from Flutter? For me, I believe flutter 3.19.1 was seemingly incompatible with web 0.3.0. Obviously no harm no foul, but it would be nice to know what to expect.

[mdzihad89]

flutter pub upgrade worked for me.

[aaaandres]

Solved by : flutter pub upgrade --major-versions

[donghaa90]

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

In my case this comment was helpful.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.