Flutter Web调试模式下无法访问Riverpod Provider状态

问题背景 #

声明了如下Riverpod Provider，通过生成器得到AutoDisposeNotifierProvider：

@riverpod
class FeeInputData extends _$FeeInputData {
  @override
  Fee build() {
    return const Fee(
      id: 0,
      institutionId: 'nmb7588BVjhvnb',
      name: '',
      academicYearId: 'utf896DHGFoIO7t87',
      installments: [],
      totalAmount: 0,
    );
  }

  void updateName(String data) {
    state = state.copyWith(name: data);
  }
}

在包含ListView.separated的Consumer组件中访问该Provider时触发错误：

Consumer(
  builder: (context, ref, _) {
    final installments = ref.watch(feeInputDataProvider).installments;
    return ListView.separated(
      physics: const NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: installments.length,
      separatorBuilder: (context, index) => Column(
        children: [
          SizedBox(height: SizeConfig(context).getVerticalSize(10)),
          Row(
            children: [
              const Expanded(child: Divider(color: AppColors.kSubtitle, height: 0.5)),
              SizedBox(width: SizeConfig(context).getHorizontalSize(5)),
              AddRemoveButton(
                type: AddRemoveButtonType.remove,
                onTap: () {
                  ref.read(feeInputDataProvider.notifier).removeInstallment(index);
                },
              ),
            ],
          ),
        ],
      ),
      itemBuilder: (context, index) => InstallmentWidget(
        installment: installments[index],
      ),
    );
  },
),

错误信息 #

The following JSNoSuchMethodError was thrown building Consumer(dirty, dependencies:
[UncontrolledProviderScope], state: _ConsumerState#08454):
TypeError: Cannot read properties of undefined (reading 'prototype')

环境配置 #

Flutter 3.7.11 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f72efea43c (5 days ago) • 2023-04-11 11:57:21 -0700
Engine • revision 1a65d409c7
Tools • Dart 2.19.6 • DevTools 2.20.1

dependencies:
  flutter:
    sdk: flutter
  riverpod_annotation: ^2.0.2
  flutter_riverpod: ^2.3.2

dev_dependencies:
  build_runner: ^2.3.3
  riverpod_generator: ^2.1.4

补充说明 #

• 仅在Chrome调试模式下出现该问题，profile和release模式运行正常
• 已尝试重装Dart SDK、清除缓存，问题未解决
• 曾遇到freezed库的类似调试模式异常

解决方案 #

1. 禁用Web浏览器调试优化 #

运行项目时添加参数，跳过浏览器调试相关的编译优化：

flutter run -d chrome --no-web-browser-debug

若使用VS Code，可在.vscode/launch.json的配置中添加：

"args": [
  "--no-web-browser-debug"
]

2. 升级Flutter到最新稳定版 #

该问题属于旧版Flutter Web的编译bug，后续版本已修复，执行升级命令：

flutter upgrade

3. 重新生成数据类代码 #

如果Fee或Installment类使用了代码生成工具（如freezed、json_serializable），清理并重新生成代码：

flutter pub run build_runner clean
flutter pub run build_runner build --delete-conflicting-outputs

4. 切换到CanvasKit渲染模式 #

在项目的web/index.html中添加配置，强制使用CanvasKit渲染：

<script>
  window.flutterWebRenderer = "canvasKit";
</script>

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