Flutter WebView页面空白报错：Uncaught TypeError: Object.fromEntries is not a function

在Flutter应用中使用WebView组件加载指定页面时，页面显示空白，调试控制台输出以下错误：

I/chromium( 5309): [INFO:CONSOLE(2)] "Uncaught TypeError: Object.fromEntries is not a function", source: https://resumatic.viosa.in/static/js/main.0dc13ca6.js (2)

相关代码如下：

class ResumaticDashboard extends StatefulWidget {
  const ResumaticDashboard({Key? key}) : super(key: key);

  @override
  State<ResumaticDashboard> createState() => _ResumaticDashboardState();
}

class _ResumaticDashboardState extends State<ResumaticDashboard> {
  late final WebViewController _controller;
  bool _loading = true;

  @override
  void initState() {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse(
          'https://resumatic.viosa.in/auth?token=${token}')) // 此处传入token
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (_) {
          setState(() {
            _loading = false;
          });
        },
      ));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Resumatic Dashboard'),
      ),
      body: Stack(
        children: [
          WebViewWidget(controller: _controller),
          if (_loading)
            Center(
              child: CircularProgressIndicator(),
            ),
        ],
      ),
    );
  }
}

这个错误的核心原因是WebView使用的Chromium内核版本不支持ES2019新增的Object.fromEntries方法，以下是几种可行的解决方式：

1. 注入Polyfill兼容补丁 #

在WebView加载目标页面之前，先注入一段JavaScript代码，手动实现Object.fromEntries方法，让旧版本内核支持该功能。修改initState中的WebViewController初始化逻辑：

@override
void initState() {
  _controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    // 先注入polyfill
    ..runJavaScript('''
      if (!Object.fromEntries) {
        Object.fromEntries = function(entries) {
          return entries.reduce(function(obj, [key, value]) {
            obj[key] = value;
            return obj;
          }, {});
        };
      }
    ''')
    ..loadRequest(Uri.parse('https://resumatic.viosa.in/auth?token=${token}'))
    ..setNavigationDelegate(NavigationDelegate(
      onPageFinished: (_) {
        setState(() {
          _loading = false;
        });
      },
    ));
  super.initState();
}

2. 升级WebView依赖版本 #

确保你使用的webview_flutter包是最新版本，新版本通常会集成更新的Chromium内核，对新的JavaScript特性支持更好。在pubspec.yaml中更新依赖：

dependencies:
  webview_flutter: ^4.4.0 # 替换为最新版本号

然后执行flutter pub get更新依赖。

3. 适配前端页面（若有权限修改） #

如果你能控制目标网页的代码，可以在前端项目中配置Babel转译，将ES2019+的代码转换为兼容旧浏览器的版本，或者直接引入core-js等polyfill库，确保Object.fromEntries在低版本环境中可用。

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