Zenn
😉

【Flutter】Chromeでデバッグできない原因と解決策

2022/02/11に公開
Chrome
Flutter
Web
Riverpod
tech

問題提起

Flutterのバージョンが2.5.3-stableで作成したWebアプリをChromeでデバッグしたところ、デバッグが進まないという問題にぶつかりました。

原因

f12でエラーを確認。

Uncaught TypeError: framework.OverrideWithProviderMixin$ is not a function
    at :50952/packages/riverpod/src/state_provider.dart.lib.js:596:90
    at Object.makeGenericType [as AutoDisposeStateProvider$] (:50952/dart_sdk.js:5004:52)
    at load__packages__riverpod__src__state_provider_dart (:50952/packages/riverpod/src/state_provider.dart.lib.js:598:60)
    at Object.execCb (:50952/require.js:1696:33)
    at Module.check (:50952/require.js:883:51)
    at Module.<anonymous> (:50952/require.js:1139:34)
    at :50952/require.js:134:23
    at :50952/require.js:1189:21
    at each (:50952/require.js:59:31)
    at Module.emit (:50952/require.js:1188:17)
    at Module.check (:50952/require.js:938:30)
    at Module.enable (:50952/require.js:1176:22)
    at Module.init (:50952/require.js:788:26)
    at callGetModule (:50952/require.js:1203:63)
    at Object.completeLoad (:50952/require.js:1590:21)
    at HTMLScriptElement.onScriptLoad (:50952/require.js:1717:29)

どうややら、riverpodが悪さをしているようなので調べたところ以下の記事で議論されていました。
https://github.com/rrousselGit/river_pod/issues/889

要約すると、

A：「riverpod使ってるねんけんど、Chromeでデバッグでけへんやんけ」

B:「わいもriverpod使ったらデバッグできひんかったわ」

Remi(riverpod制作者)：「Dartの問題や、わいにはどうにもできひん」

C:「Flutter2.8とDart2.15がリリースされて動くみたいやで」

とのことです。

解決策

Flutterでriverpodを使ったWebアプリをデバッグしたいのなら以下のバージョン以上を使いましょう。

  • Flutter2.8
  • Dart2.15

あとがき

Flutterは未完なところがありますが、少し待てば解決されるのはすごいと思いましたね。
あと、riverpodが議論に上がると製作者が参加するのはおもしろいですね。（私の勉強不足で、よくあることなのかもしれませんが）

Discussion