Flutter Web加载报错：期望Element类型却得到LegacyJavaScriptObject

API 探路者

2026-8-1

问题描述

Chrome浏览器加载Flutter Web应用时显示空白页面，控制台报错如下：

Flutter Web Bootstrap: Programmatic
Error: Expected a value of type 'Element', but got one of type 'LegacyJavaScriptObject'
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 99:3        castError
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 452:10  cast
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/classes.dart 635:14     as_C
dart-sdk/lib/html/dart2js/html_dart2js.dart 11786:34                              _get
dart-sdk/lib/collection/list.dart 263:23                                          toList
dart-sdk/lib/html/dart2js/html_dart2js.dart 11803:46                              get iterator
dart-sdk/lib/collection/list.dart 76:52                                           iterator]
packages/wakelock_web/src/import_js_library.dart 64:27                            _isLoaded
packages/wakelock_web/src/import_js_library.dart 57:10                            _isImported

Flutter Doctor检测结果：

解决方案

该错误由wakelock_web包在DOM元素类型转换时触发，可尝试以下步骤修复：

升级依赖包
打开pubspec.yaml，将wakelock_web依赖更新至最新稳定版，执行命令：
```
flutter pub upgrade wakelock_web
```

替换自定义实现
若升级无效，可自定义Web端唤醒锁逻辑替代原包：

在项目lib目录下创建wakelock_web_custom.dart：

import 'dart:js' as js;

class WakelockWebCustom {
  static Future<void> enable() async {
    js.context.callMethod('requestWakeLock', ['screen']);
  }

  static Future<void> disable() async {
    final wakeLock = js.context['wakeLock'];
    if (wakeLock != null) wakeLock.callMethod('release');
  }

  static Future<bool> get isEnabled async {
    final wakeLock = js.context['wakeLock'];
    return wakeLock != null && wakeLock['active'] == true;
  }
}

在Web平台初始化时切换为该自定义实现。

清理缓存重建
执行命令清理缓存并重新构建项目：
```
flutter clean
flutter pub get
flutter run -d chrome
```
检查浏览器版本
确保Chrome版本≥84（Wake Lock API最低支持版本），版本过低则升级浏览器后重试。

内容的提问来源于stack exchange，提问作者Jches