0

I have using firebase for project flutter of me. but when I want build web not work

step1: I run

flutter config --enable-web

step2: I run

flutter run -d chrome   

and after appear error bellow

TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (http://localhost:63143/packages/firebase_core_web/src/interop/core.dart.lib.js:48:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new
(http://localhost:63143/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:873:64)
at Function.registerWith (http://localhost:63143/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755:73)
at Object.registerPlugins (http://localhost:63143/packages/doxaspc/generated_plugin_registrant.dart.lib.js:34:46)
at main (http://localhost:63143/web_entrypoint.dart.lib.js:44:35)
at main.next (<anonymous>)
at runBody (http://localhost:63143/dart_sdk.js:39052:34)
at Object._async [as async] (http://localhost:63143/dart_sdk.js:39083:7)
at main$ (http://localhost:63143/web_entrypoint.dart.lib.js:43:18)
at http://localhost:63143/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:63143/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:63143/dwds/src/injected/client.js:8656:21)
at http://localhost:63143/dwds/src/injected/client.js:22068:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:63143/dwds/src/injected/client.js:3830:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:63143/dwds/src/injected/client.js:10905:12)
at Object._asyncStartSync (http://localhost:63143/dwds/src/injected/client.js:3794:20)
...

file index.html of me

<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="doxaspc">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="manifest" href="manifest.json">
</head>
<body>
    <!-- Firebase Setup -->
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.0/firebase-firestore.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "AIzaSyD3kioPzFSkD6xXndI9fkguKhj0Qadb304",
    authDomain: "fir-d71eb.firebaseapp.com",
    projectId: "fir-d71eb",
    storageBucket: "fir-d71eb.appspot.com",
    messagingSenderId: "983518157786",
    appId: "1:983518157786:web:b8db1e8f8806292de97ee3",
    measurementId: "G-Z2Q69GT9WB"
  };
  firebase.initializeApp(firebaseConfig);
</script>
<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('flutter-first-frame', function () {
      navigator.serviceWorker.register('flutter_service_worker.js');
    });
  }
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html> 

I want enable web from project app flutter of me but I dont know I miss step? please show me how ? please help me

kevin
  • 11
  • 2
  • 7

1 Answers1

0

If you are using Flutter Web with Firebase make sure you have the SDKs installed in the body tag of your ./web/index.html

<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-analytics.js"></script>

Furthermore, make sure you call firebase.initializeApp(...) with the configuration parameters in the index.html as well.

<script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "AIz...",
      authDomain: "...",
      databaseURL: "https://<project-name>.firebaseio.com",
      projectId: "...",
      storageBucket: "<project-name>.appspot.com",
      messagingSenderId: "...",
      appId: "...",
      measurementId: "..."
    };
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

At last configure firebase

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}
gtxtreme
  • 1,830
  • 1
  • 13
  • 25
  • Hey @kevin, please make sure, you do all of the steps above. Start from the first, it should fix your problem Also make sure to check [this](https://stackoverflow.com/questions/63492211/no-firebase-app-default-has-been-created-call-firebase-initializeapp-in/63492262#63492262) link – gtxtreme Jul 25 '21 at 08:26
  • you can help me see error https://stackoverflow.com/questions/68516289/error-unsupported-operation-platform-operatingsystem – kevin Jul 25 '21 at 08:44
  • Atleast mark this answer as solved, before opening another issue regarding the same – gtxtreme Jul 25 '21 at 12:51