Search code examples
firebaseflutterdartflutter-web

Flutter web Firebase init issue while building

i have some problems with building web application on flutter. Earlier, this problem does not exists, but after some updates, while i building app on web(on mobile devices its no problems) it shows this:

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 : I added this line in following files, and update dependencies, project started but only once, now its show same errors: 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. Symbol '*' representing some data. packages:

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.
Solution

  • After some time of my suffering, I found a solution. it is necessary to specify versions of packages much lower than those that firebase preinstalls via cdn. For example, I had a running script (but versions from 8.10.0 and above do not work) 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>