Flutter web is not working after upgrading to Flutter 3.24

Question

After upgrading Flutter to version 3.24, I created a brand new application and run it on Chrome. I am getting this exception in console

The following JSNoSuchMethodError was thrown building NotificationListener<NavigationNotification>:
TypeError: Cannot read properties of undefined (reading 'mapEquals')

The relevant error-causing widget was:
  MaterialApp
  MaterialApp:file:///C:/Users/Munsif%20Ali/Desktop/Optemas/referee_dashboard/lib/main.dart:14:18

When the exception was thrown, this was the stack:
packages/flutter/src/widgets/shortcuts.dart 834:10                       set shortcuts
shortcuts.dart:834
packages/flutter/src/widgets/shortcuts.dart 1076:7                       initState
shortcuts.dart:1076
packages/flutter/src/widgets/framework.dart 5748:55                      [_firstBuild]
framework.dart:5748
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5780:11                      performRebuild
framework.dart:5780
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5771:11                      [_firstBuild]
framework.dart:5771
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5780:11                      performRebuild
framework.dart:5780
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5771:11                      [_firstBuild]
framework.dart:5771
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5333:7                       rebuild
framework.dart:5333
packages/flutter/src/widgets/framework.dart 5599:5                       [_firstBuild]
framework.dart:5599
packages/flutter/src/widgets/framework.dart 5593:5                       mount
framework.dart:5593
packages/flutter/src/widgets/framework.dart 4468:15                      inflateWidget
framework.dart:4468
packages/flutter/src/widgets/framework.dart 3963:18                      updateChild
framework.dart:3963
packages/flutter/src/widgets/framework.dart 5642:16                      performRebuild
framework.dart:5642
packages/flutter/src/widgets/framework.dart 5780:11

This is the app code

import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello World'),
      ),
      body: const Center(
        child: Text('Hello World'),
      ),
    );
  }
}

Same, getting different random errors every time I run an existing or new project. Works running html renderer, just not canvaskit. Haven't figured out anymore yet. — Kenny Flannery
– Kenny Flannery, Commented Aug 10, 2024 at 15:35

TylerH · Accepted Answer · 2024-08-23 15:19:00Z

7

This seems to be a bug with Flutter version 3.24.0, you can find relevant GitHub issues here and here.

It seems like they should have it fixed in the next release, as mentioned here.

So version 3.24.1 (or later) might have it solved. If you need a stable dev environment, I suggest you downgrade to the previous stable Flutter release.

Otherwise, you can switch the renderer to HTML (or AUTO on desktop) or keep refreshing the website/app after the first launch to make the error temporally disappear.

edited Aug 23, 2024 at 15:19

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Aug 11, 2024 at 9:29

Guillem Poy

8842 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Munsif Ali · Accepted Answer · 2025-05-19 11:31:25Z

I have the same problem - but in fact I get different errors: both JSNoSuchMethodError and TypeError, but also, for example.

Reject promise with error: TypeError: unable to read undefined property (read 'SharedPreferencesPlugin')

or

The message on the flutter/lifecycle channel was rejected before it could be handled. This happens when the plugin sends messages to the framework page before the framework has had a chance to register a listener. See the ChannelBuffers API documentation to learn how to configure the channel to expect more messages or to expect message rejection: https://api.flutter.dev/flutter/dart-ui/ChannelBuffers-class.html

From what I've noticed the problem is in Flutter's preparation of the web platform in the /web directory. I tried flutter clean and flutter pub cache clean. I even created a new 'Hello World' project without external dependencies. All to no effect. The only thing that helped was swapping the contents of the PROJECT_DIR/web/index.html file:

    <!DOCTYPE html>
    <html>
    <head>
      <!--
        If you are serving your web app in a path other than the root, change the
        href value below to reflect the base path you are serving from.
    
        The path provided below has to start and end with a slash "/" in order for
        it to work correctly.
    
        For more details:
        * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    
        This is a placeholder for base href that will be replaced by the value of
        the `--base-href` argument provided to `flutter build`.
      -->
      <base href="$FLUTTER_BASE_HREF">
    
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="A new Flutter project.">
    
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="test_app">
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
    
      <!-- Favicon -->
      <link rel="icon" type="image/png" href="favicon.png"/>
    
      <title>test_app</title>
      <link rel="manifest" href="manifest.json">
    </head>
    <body>
      <script src="flutter_bootstrap.js" async></script>
    </body>
    </html>

to the old [deprecated] version:

    <!DOCTYPE html>
    <html>
    <head>
        <!--
          If you are serving your web app in a path other than the root, change the
          href value below to reflect the base path you are serving from.
    
          The path provided below has to start and end with a slash "/" in order for
          it to work correctly.
    
          For more details:
          * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    
          This is a placeholder for base href that will be replaced by the value of
          the `--base-href` argument provided to `flutter build`.
        -->
        <base href="$FLUTTER_BASE_HREF">
    
        <meta charset="UTF-8">
        <meta content="IE=Edge" http-equiv="X-UA-Compatible">
        <meta content="A new Flutter project." name="description">
    
        <!-- iOS meta tags & icons -->
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <meta content="wheelio" name="apple-mobile-web-app-title">
        <link href="icons/Icon-192.png" rel="apple-touch-icon">
    
        <!-- Favicon -->
        <link href="favicon.png" rel="icon" type="image/png"/>
    
        <title>wheelio</title>
        <link href="manifest.json" rel="manifest">
    
        <script>
            // The value below is injected by flutter build, do not touch.
            const serviceWorkerVersion = null;
        </script>
        <!-- This script adds the flutter initialization JS code -->
        <script defer src="flutter.js"></script>
    </head>
    <body>
    <script>
        window.addEventListener('load', function(ev) {
          // Download main.dart.js
          _flutter.loader.loadEntrypoint({
            serviceWorker: {
              serviceWorkerVersion: serviceWorkerVersion,
            },
            onEntrypointLoaded: function(engineInitializer) {
              engineInitializer.initializeEngine().then(function(appRunner) {
                appRunner.runApp();
              });
            }
          });
        });
    </script>
    </body>
    </html>

Yevgen · Accepted Answer · 2024-08-09 12:32:02Z

-1

The app has to work if you remove WidgetsFlutterBinding.ensureInitialized();

But how to avoid removing ensureInitialized I don't know yet.

edited Aug 9, 2024 at 12:32

answered Aug 9, 2024 at 7:48

Yevgen

1011 gold badge1 silver badge8 bronze badges

2 Comments

Munsif Ali Over a year ago

it was't working without that line as i just created the new project. then i added that line thought it might work but did'nt worked.

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Flutter web is not working after upgrading to Flutter 3.24

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related