Firebase.initializeApp()でデバッグがクラッシュする【Webアプリ】

Flutterでwebアプリを開発しています。
Firebaseを用いてAuthを実装したいと考えているのですが、Firebase導入のところで原因不明のクラッシュが発生してしまいます。

Flutterを使い始めてまだ時間が経っていないので何か勘違いしている箇所があるかもしれません。

#やったこと

基本的に公式のドキュメントやこちらの動画を参考に進めていますが、一部バージョンが古い箇所があったのでそこは変えています。

####Firebaseのインストール

Flutterプロジェクトを新しく作り、ターミナルで以下を実行しました。

$ flutter pub add firebase_core
$ flutter pub add firebase_auth
$ flutter pub get

####Firebaseの有効化

pubspec.yamlのdependencies:下に以下のコードを追加しました。

yaml
1#pubspec.yaml
2  firebase_auth: ^3.1.1
3  firebase_core: ^1.6.0

####CDNの記述

Web向けに開発するのでindex.htmlの<body>にFirebaseのCDNを追加しました。

####Firebaseの初期化

そしてmain.dartに以下の記述をしました。

dart
1//main.dart
2import 'package:flutter/material.dart';
3import 'package:firebase_core/firebase_core.dart';
4
5void main() async {
6  WidgetsFlutterBinding.ensureInitialized();
7  await Firebase.initializeApp();     //ここが問題点
8  runApp(MaterialApp(
9  ....

#調べたこと

いろいろネットで調べてみると「Firebase coreのバージョンが違うかもしれない」ということが書いてあったのですがpub.devを見ても現在は1.6.0がリリースされているので間違いはないと思います。
https://pub.dev/packages/firebase_core

また、「flutterのバージョンが古すぎる可能性がある」とあったのでターミナルで
flutter upgradeを実行しflutterを最新バージョンにアップデートしました。

flutter cleanは一度試したのですが特に変化はありませんでした。

#問題

Firebase.initializeApp()が呼ばれるとchromeがフリーズし強制的にVisual Studio Codeが開きます。
エディターではweb_entrypoint.dartのui.webOnlyInitializePlatform();部分が黄色くマークされていました。エラー文などは表示されていません。

await Firebase.initializeApp();の部分を消すとうまく動作します。

どなたか回答お願いいたします。

行動規範の内容に同意します

回答1件

自己解決

index.htmlに追加するコードをFirebaseそのままではなく、

html
1<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
2
3<script>
4  const firebaseConfig = {
5    apiKey: "**********************",
6    authDomain: "***********",
7    projectId: "***********",
8    storageBucket: "***************",
9    messagingSenderId: "**************",
10    appId: "************",
11    measurementId: "****************S"
12  };
13
14  // Initialize Firebase
15  firebase.initializeApp(firebaseConfig);
16  const analytics = getAnalytics(app);
17</script>