環境
Flutter (Channel beta, 1.18.0-11.1.pre, on Mac OS X 10.15.4 19E287, locale ja-JP)
発生したエラー
FirebaseのAuthentication（認証）を利用してユーザー登録機能を実装し試したところ以下のエラーが発生
NoSuchMethodError: 'message' method not found
Receiver: Instance of 'JSNoSuchMethodError'
Arguments: []
関係するコード
<!DOCTYPE html>
<html>
<head>
// 省略
</head>
<body>
// 省略
// FirebaseのSettings > 全般 > マイアプリでは、ここから
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
// 省略
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
// ここまでをindex.htmlに追加するように記載されている。
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
// 省略
class _MyAuthPageState extends State<MyAuthPage> {
// 省略
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Column(
children: <Widget>[
TextFormField(
// 省略
),
TextFormField(
// 省略
),
RaisedButton(
onPressed: () async {
try {
// 省略
} catch (e) {
setState(() {
// この部分でエラー発生
infoText = "登録NG：${e.message}";
});
}
},
// 省略
),
Text(infoText)
],
),
),
),
);
}
}
調査
e に対してmessageが無いということなので、そもそも e には何が入っているのか調べてみようと、試しに e のみを呼んでみると
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth`
うーん、どうやら上手くfirebase.authが読み込めてないっぽい。
とりあえず、このエラー文を使って flutter such as null firebase.auth の文章でググった。
すると、本家flutterのissueをトップに発見！（このissueはauthではなくstorage使おうとしている）
https://github.com/flutter/flutter/issues/37079
「解決方法はstackoverflowを見よ！」とのことで、以下が該当のstackoverflow
https://stackoverflow.com/questions/57242045/flutter-web-tried-to-call-a-non-function-such-as-null-dart-global-firebase-s
ふむふむ、自分のコードにはないscriptがあるなー
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-storage.js"></script>
おそらくfirebase-auth.jsが必要なんだろうということで、
念の為 firebase authentication firebase-auth.js の文章でググると公式リファレンスが出てきた。
https://firebase.google.com/docs/web/setup?hl=ja
読み進めると「必要なら追加してね！」との文章が！
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/6.2.0/firebase-auth.js"></script>
解決方法
というわけでscriptを追加。
<!DOCTYPE html>
<html>
<head>
// 省略
</head>
<body>
// 省略
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-analytics.js"></script>
// この1行を追加！
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-auth.js"></script>
<script>
var firebaseConfig = {
// 省略
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
無事に新規登録できた！
補足
Firebaseの各機能を使いたいたびにscriptを追加するのが面倒な場合は以下のようなコードを1行書けばOK。
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase.js"></script>
※ただし、本番環境アプリには非推奨とのこと。（Firebase公式リファレンスより）
おわりに
『もっと簡単にできる方法あるよーーー！』
『ここ間違っているよーーー！』
等ございましたらコメントいただけると幸いです！
Twitterアカウント
・本垢： https://twitter.com/jiko797torayo
・Flutter用： https://twitter.com/tora3flutter