构建时 Flutter web Firebase init 问题

Question

我在使用 Flutter 构建 Web 应用程序时遇到了一些问题。早些时候，这个问题不存在，但经过一些更新后，当我在网络上构建应用程序时（在移动设备上没有问题）它显示：

Error: Cannot instantiate firebase-messaging.js - be sure to load firebase-app.js first.
at https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js:1:40806
at Object.execCb (http://localhost:51097/require.js:1696:33)
at Module.check (http://localhost:51097/require.js:883:51)
at Module.enable (http://localhost:51097/require.js:1176:22)
at Module.init (http://localhost:51097/require.js:788:26)     
at callGetModule (http://localhost:51097/require.js:1203:63)
at Object.completeLoad (http://localhost:51097/require.js:1590:21)
at HTMLScriptElement.onScriptLoad (http://localhost:51097/require.js:1717:29)
null
Error: Cannot instantiate firebase-storage.js - be sure to load firebase-app.js first.
at https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js:1:44825
at Object.execCb (http://localhost:51097/require.js:1696:33)
at Module.check (http://localhost:51097/require.js:883:51)
at Module.enable (http://localhost:51097/require.js:1176:22)
at Module.init (http://localhost:51097/require.js:788:26)
at callGetModule (http://localhost:51097/require.js:1203:63)
at Object.completeLoad (http://localhost:51097/require.js:1590:21)
at HTMLScriptElement.onScriptLoad (http://localhost:51097/require.js:1717:29)
null                                                                               
Error: Cannot instantiate firebase-auth.js - be sure to load firebase-app.js first.
at https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js:1:177115
at Object.execCb (http://localhost:51097/require.js:1696:33)
at Module.check (http://localhost:51097/require.js:883:51)
at Module.enable (http://localhost:51097/require.js:1176:22)
at Module.init (http://localhost:51097/require.js:788:26)
at callGetModule (http://localhost:51097/require.js:1203:63)
at Object.completeLoad (http://localhost:51097/require.js:1590:21)
at HTMLScriptElement.onScriptLoad (http://localhost:51097/require.js:1717:29)

UPD1 : 我在以下文件中添加了这一行，并更新了依赖项，项目只启动了一次，现在它显示相同的错误： main.dart:

Firebase.initializeApp(
    options: const FirebaseOptions(
        apiKey: "*******************",
        authDomain: "*******************",
        databaseURL:
            "*******************",
        projectId: "*******************",
        storageBucket: "*******************",
        messagingSenderId: "*******************",
        appId: "*******************",
        measurementId: "*******************"));

index.html:

<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.8/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "*******************",
  authDomain: "*******************",
  projectId: "*******************",
  storageBucket: "*******************",
  messagingSenderId: "*******************",
  appId: "*******************",
  measurementId: "*******************"
};

// Initialize Firebase

const app = initializeApp(firebaseConfig);

P.S。符号“*”代表一些数据。包裹：

Resolving dependencies...
_fe_analyzer_shared 40.0.0
analyzer 4.1.0
animated_text_kit 4.2.1
args 2.3.1
async 2.8.2 (2.9.0 available)
badges 2.0.2
bloc 8.0.3
boolean_selector 2.1.0
build 2.3.0
build_config 1.0.0
build_daemon 3.1.0
build_resolvers 2.0.8
build_runner 2.1.11
build_runner_core 7.2.3
built_collection 5.1.1
built_value 8.3.0
cached_network_image 3.2.1
cached_network_image_platform_interface 1.0.0
cached_network_image_web 1.0.1
characters 1.2.0 (1.2.1 available)
charcode 1.3.1
checked_yaml 2.0.1
clock 1.1.0
cloud_firestore 3.1.15
cloud_firestore_platform_interface 5.5.6
cloud_firestore_web 2.6.15
code_builder 4.1.0
collection 1.16.0
convert 3.0.1
cross_file 0.3.3
crypto 3.0.2
cupertino_icons 1.0.4
custom_image_crop 0.0.4
dart_style 2.2.3
dio 4.0.6
emoji_picker_flutter 1.1.2
fake_async 1.3.0
ffi 1.2.1
file 6.1.2
file_picker 4.5.1
firebase_auth 3.3.18
firebase_auth_platform_interface 6.2.6
firebase_auth_web 3.3.15
firebase_core 1.17.0
firebase_core_platform_interface 4.4.0
firebase_core_web 1.6.4
firebase_messaging 11.4.0
firebase_messaging_platform_interface 3.5.0
firebase_messaging_web 2.4.0
firebase_storage 10.2.16
firebase_storage_platform_interface 4.1.6
firebase_storage_web 3.2.15
fixnum 1.0.1
flutter 0.0.0 from sdk flutter
flutter_bloc 8.0.1
flutter_blurhash 0.7.0
flutter_cache_manager 3.3.0
flutter_lints 2.0.1
flutter_neumorphic 3.2.0
flutter_plugin_android_lifecycle 2.0.6
flutter_sound 9.2.12
flutter_sound_platform_interface 9.2.12
flutter_sound_web 9.2.12
flutter_test 0.0.0 from sdk flutter
flutter_web_plugins 0.0.0 from sdk flutter
freezed 2.0.3+1
freezed_annotation 2.0.3
frontend_server_client 2.1.3
gesture_x_detector 1.1.1
get 4.6.3
glob 2.0.2
google_fonts 2.3.3
google_sign_in 5.3.1
google_sign_in_android 5.2.7
google_sign_in_ios 5.3.1
google_sign_in_platform_interface 2.1.3
google_sign_in_web 0.10.1+2
graphs 2.1.0
http 0.13.4
http_multi_server 3.2.0
http_parser 4.0.1
image_picker 0.8.5+3
image_picker_android 0.8.4+13
image_picker_for_web 2.1.8
image_picker_ios 0.8.5+5
image_picker_platform_interface 2.5.0
intl 0.17.0
io 1.0.3
js 0.6.4
json_annotation 4.5.0
lints 2.0.0
logger 1.1.0
logging 1.0.2
matcher 0.12.11
material_color_utilities 0.1.4 (0.1.5 available)
meta 1.7.0 (1.8.0 available)
mime 1.0.2
nested 1.0.0
octo_image 1.0.2
open_file 3.2.1
package_config 2.0.2
path 1.8.1 (1.8.2 available)
path_provider 2.0.10
path_provider_android 2.0.14
path_provider_ios 2.0.9
path_provider_linux 2.1.6
path_provider_macos 2.0.6
path_provider_platform_interface 2.0.4
path_provider_windows 2.0.6
pedantic 1.11.1
platform 3.1.0
plugin_platform_interface 2.1.2
pool 1.5.0
process 4.2.4
provider 6.0.2
rive 0.8.4
rxdart 0.27.3
shared_preferences 2.0.15
shared_preferences_android 2.0.12
shared_preferences_ios 2.1.1
shared_preferences_linux 2.1.1
shared_preferences_macos 2.0.4
shared_preferences_platform_interface 2.0.0
shared_preferences_web 2.0.4
shared_preferences_windows 2.1.1
shelf 1.3.0
shelf_web_socket 1.0.1
sky_engine 0.0.99 from sdk flutter
source_gen 1.2.2
source_span 1.8.2 (1.9.0 available)
sqflite 2.0.2+1
sqflite_common 2.2.1+1
stack_trace 1.10.0
stream_channel 2.1.0
stream_transform 2.0.0
string_scanner 1.1.0 (1.1.1 available)
synchronized 3.0.0+2
term_glyph 1.2.0
test_api 0.4.9
timing 1.0.0
typed_data 1.3.1
uuid 3.0.6
vector_math 2.1.2
watcher 1.0.1
web_socket_channel 2.2.0
win32 2.6.1
xdg_directories 0.2.0+1
yaml 3.1.1
No dependencies changed.

Answer 1

将 firebase-auth CDN 脚本添加到项目 web 文件夹内的 index.html 文件中。

首先访问 firebase_console -> 转到您的项目 -> “添加应用程序”（如果未添加） -> select web -> 继续该过程 -> 它会显示如下所示的配置脚本复制所需的键：值对，并以下面给出的格式将其作为脚本标记添加到 index.html.

将此添加到 index.html 文件末尾最后一个 </script> 标记后

<script src="https://www.gstatic.com/firebasejs/9.6.4/firebase-auth.js"></script>.

（记得在 CDN URL 中检查您的 firebase-auth 版本号与您正在使用的 pub 包，例如：9.6.4）。

然后将此块粘贴到 CDN 脚本后 link 以及您的 firebase 项目的相应值

<script type="module">
   var firebaseConfig = 
   {
   apiKey: "{YOUR_API_KEY}",
   authDomain: "{YOUR_AUTH_DOMAIN}",
   databaseURL: "{YOUR_DATABASE_URL}",
   projectId: "{YOUR_PROJECT_ID}",
   storageBucket: "{YOUR_STORAGE_BUCKET_LINK}",
   messagingSenderId: "{YOUR_MESSENGER_ID}",
   appId: "{YOUR_APP_ID}",
   measurementId: "{YOUR_MESUREENT_ID}"
 };

 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
 const analytics = getAnalytics(app); // ONLY IF ANALYTICS IS REQUIRED
</script>

这应该可以完成工作

Answer 2

经过一段时间的痛苦，我找到了解决办法。有必要指定比 firebase 通过 cdn 预安装的版本低得多的包版本。例如，我有一个运行脚本（但 8.10.0 及以上版本不起作用） index.html:

<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>

<script>
  const firebaseConfig = {
    apiKey: "*",
    authDomain: "*",
    databaseURL: "*",
    projectId: "*",
    storageBucket: "*",
    messagingSenderId: "*",
    appId: "*",
    measurementId: "*"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
</script>

构建时 Flutter web Firebase init 问题

Flutter web Firebase init issue while building

firebase

flutter

dart

flutter-web