Flutter 2.0 web version with firebase messaging is not working

Question

Flutter application is designed for mobile and web. We are using firebase_messaging for messaging funtioanlity. It was working charm earlier. Recently we upgraded our Flutter SDK to 2.0 version (Channel stable, 2.0.4).

And the application works as like earlier in mobile version. But while executing in web version gives me the below mentioned error and was unable to solve.

Following command already tried to disable null safety but no use.

flutter run --no-sound-null-safety

Error logs:

Debug service listening on ws://127.0.0.1:53789/y22KqzTNKwU=/ws

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Debug service listening on ws://127.0.0.1:53789/y22KqzTNKwU=/ws
TypeError: Cannot read property 'isSupported' of undefined
    at new firebase_messaging_web.FirebaseMessagingWeb.new (http://localhost:53495/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:189:51)
    at Function.registerWith (http://localhost:53495/packages/firebase_messaging_web/firebase_messaging_web.dart.lib.js:56:73)
    at Object.registerPlugins (http://localhost:53495/packages/pca_app/generated_plugin_registrant.dart.lib.js:44:49)
    at main (http://localhost:53495/web_entrypoint.dart.lib.js:44:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:53495/dart_sdk.js:39051:34)
    at Object._async [as async] (http://localhost:53495/dart_sdk.js:39082:7)
    at main$ (http://localhost:53495/web_entrypoint.dart.lib.js:43:18)
    at http://localhost:53495/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:53495/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:53495/dwds/src/injected/client.js:8656:21)
    at http://localhost:53495/dwds/src/injected/client.js:22068:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:53495/dwds/src/injected/client.js:3830:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:53495/dwds/src/injected/client.js:10905:12)
    at Object._asyncStartSync (http://localhost:53495/dwds/src/injected/client.js:3794:20)
    at main__closure1.$call$body$main__closure (http://localhost:53495/dwds/src/injected/client.js:22080:16)
    at main__closure1.call$1 (http://localhost:53495/dwds/src/injected/client.js:22007:19)
    at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:53495/dwds/src/injected/client.js:4153:16)
    at _CustomZone.runUnary$2$2 (http://localhost:53495/dwds/src/injected/client.js:12136:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:53495/dwds/src/injected/client.js:12068:14)
    at _ControllerSubscription._sendData$1 (http://localhost:53495/dwds/src/injected/client.js:11697:19)
    at _DelayedData.perform$1 (http://localhost:53495/dwds/src/injected/client.js:11849:59)
    at _PendingEvents_schedule_closure.call$0 (http://localhost:53495/dwds/src/injected/client.js:11898:14)
    at Object._microtaskLoop (http://localhost:53495/dwds/src/injected/client.js:3990:24)
    at StaticClosure._startMicrotaskLoop (http://localhost:53495/dwds/src/injected/client.js:3996:11)
    at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:53495/dwds/src/injected/client.js:10774:9)
    at invokeClosure (http://localhost:53495/dwds/src/injected/client.js:1250:26)
    at MutationObserver.<anonymous> (http://localhost:53495/dwds/src/injected/client.js:1269:18)

Flutter doctor report:

> Doctor summary (to see all details, run flutter doctor -v): [√]
> Flutter (Channel stable, 2.0.4, on Microsoft Windows [Version
> 10.0.18363.1441], locale en-GB) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [√] Chrome - develop for
> the web [√] Android Studio (version 4.0) [√] VS Code (version 1.41.1)
> [√] Connected device (2 available)
> 
> • No issues found!

Solution

Updated September 2021:

---

Add this 8.6.1 SDK to your index.html, and It should look like this layout.

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>

So far, it's the recommended one. Running it without errors on Stable channel 2.5.0 and

  firebase_messaging: ^10.0.3
  firebase_messaging_web: ^2.0.2
  firebase_core: ^1.6.0
  firebase_core_web: ^1.1.0

Comments

[Raghu Mudem]

Thanks alot for your pin point answer. The first 2 script lines in my index.html and firebase dependencies mentioned for pubspec.yaml did the trick.

[Amir Farahani]

thanks a lot, but friends check pub.dev to install lasted version of packages.

[Huthaifa Muayyad]

Thanks for your comment, updated the JS imports in the answer, and will update pubspec entries.