Unable to access Riverpod provider state

Question

I currently have a riverpod provider declared as follows:

@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);
  }
}

I have used the riverpod generator which generates an AutoDisposeNotifierProvider.

This is my Consumer widget which has a ListView.seperated as its child:

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)),

                            /// Remove address button
                            AddRemoveButton(
                              type: AddRemoveButtonType.remove,
                              onTap: () {
                                ref.read(feeInputDataProvider.notifier).removeInstallment(index);
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                    itemBuilder: (context, index) => InstallmentWidget(
                      installment: installments[index],
                    ),
                  );
                },
              ),

Now, the issue is that when I try to access the provider via Consumer widget, it returns the following error:

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

I have wrapped my MaterialApp with ProviderScope widget.

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

How do I fix this?

Edit:

I just found that the issue pops up when I run in debug mode on Chrome (This is a Flutter Web project). Works fine on profile and release modes. I tried reinstalling the Dart-SDK too assuming issues with the cache but the error still persists.

A similar debug only issue happens with freezed as well for me. Link to this is as follows:

Unable to access fromJson function for custom model with freezed

Unable to access Riverpod provider state

Answers (1)

Related Questions