こりゃ分からん、というトラブルに遭遇 – 開発日記(105)

2024/06/25(1) デプロイ済みのソフトが突然動かなくなる

意味不明な現象に遭遇した。

あるタイミングから突然、Webデプロイ済みのIdea Laneが開けなくなった。

Loading…（index.htmlで表示しているもの）から先に進まなくなる。
ブラウザのDeveloper Consoleで見るとエラーが発生している。

エラーの内容↓

Rejecting promise with error: FormatException: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Uncaught (in promise) null

エラーを見ても全然ピンとこない。
原因が分からず、解決策も分からない。

• ローカルでは問題なく動くのだが、WebデプロイするとPCでもスマホでもダメ。
• ブラウザを変えてもダメ。
• キャッシュの問題でも無さそう。

画面の初期化までたどり着かないことから、flutterで記述しているソースの問題では無さそうなのだが、とにかくよくわからない。再度デプロイしてもダメ。

仕方なくfirebase web hostingで丸ごと前のバージョンにロールバックしたら問題が起きなくなった。
でも、新バージョンをデプロイすると、やはり同じ問題が起きてしまう。

これじゃ、今後いくらflutterのソースを直しても、サーバに反映できないじゃん！

（色々あがいて無駄に時間が過ぎる……）

どうしても原因が分からないし、心当たりも無い。
最近やったのは、せいぜいPCにインストールしているfirebase-toolsのバージョンアップをしたくらいだ。
それも ver 13.11.2 → ver13.11.4 に上げただけ

色々やっても解決出来ないので、試しにfirebase-toolsのバージョンを戻してからビルドしなおしてサーバにデプロイしたら…なんと治った！

え？なにこれ！？ firebase-toolsの問題ということ？？？

何はともあれ、対応策が分かって良かった……。

それにしてもflutterで作ったソフトがサーバで動かなくなった問題の解決策が

npm i -g firebase@^13.11.2

なんて、分かるか！！！

またしても無駄な時間を過ごしてしまった。

時間を使いすぎたので今は根本原因を追うような心の余裕も無いが、もはや、これまで危険と感じていたflutterのバージョンアップだけでなく、firebase-toolのマイナーバージョンアップすらも危険ということなのか…。

2024/06/25(2) スマホで文字入力しただけで画面が崩れる

あともう一つ。

TextFieldをmaxLines: nullにして、スマホから文字入力すると、カーソルが不自然に下に行ってしまう。

画像だと分かりづらいが、aと打っただけでTextFieldが縦に少し広がってしまい、本来はaの右に出るはずのカーソルが、実はaの下段にいる。

この現象はflutter webでサーバデプロイして、スマホ実機でブラウザからアクセスし、スクリーンキーボードで入力しないとしないと再現しない。

それにしても、「TextFieldにスマホからテキストを打つ」という基本的な動作すらまともに動かないとは衝撃を受けた。

まだまだflutter Webは実用レベルに至ってないと言わざるを得ないのだろうか……。

テスト用ソース (dartPadで開く)

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    builder: (context, child) => const MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<StatefulWidget> createState() {
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: TextField(
          maxLines: null,
          keyboardType: TextInputType.multiline,
          controller: TextEditingController(),
          cursorColor: Colors.black,
        ),
      ),
    );
  }
}

翌日追記：
結局、GitHubにIssueとして報告しました。https://github.com/flutter/flutter/issues/150851
報告したイシューはクローズされていますが、この不具合は2025年1月時点でも未解決で非常に困っています。

※開発日記は当時の記録をもとに作成し、必要に応じて加筆・補足しています