Flutter Web：javascript 未捕获引用错误：Firebase 未定义？

Question

I am trying to add firebase to my flutter web app, i keep getting this error and i dont know why anymore, i have tried everything我正在尝试将 firebase 添加到我的 flutter web 应用程序，我一直收到此错误，我不知道为什么了，我已经尝试了一切

Google chrome console error谷歌浏览器控制台错误

3(index):1 Unchecked runtime.lastError: The message port closed before a response was received.
zone.dart:1175 Uncaught ReferenceError: firebase is not defined
    at Object.X1 (core.dart:54)
    at cloud_firestore_web.dart:36
    at Qi.a (async_patch.dart:315)
    at Qi.$2 (async_patch.dart:340)
    at Object.an (async_patch.dart:245)
    at Object.BB (main.dart:8)
    at js_helper.dart:2677
    at js_helper.dart:2677
    at dartProgram (js_helper.dart:2677)
    at js_helper.dart:2677

here is my index.html file这是我的 index.html 文件

<!DOCTYPE html>
<html>
<head>
  <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="weepay_web">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>weepay_web</title>
  <link rel="manifest" href="manifest.json">
  <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
</head>
<body>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-app.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
       https://firebase.google.com/docs/web/setup#available-libraries -->
 
    <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "AIzaSyBqi_VL9n1FGXfK2LifaQjVGIm4XN3Sdkw",
        authDomain: "wepay-c6dad.firebaseapp.com",
        databaseURL: "https://wepay-c6dad.firebaseio.com",
        projectId: "wepay-c6dad",
        storageBucket: "wepay-c6dad.appspot.com",
        messagingSenderId: "10570764732",
        appId: "1:10570764732:web:0f56355e304272af91dbb9",
        measurementId: "G-539E2WLH93"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
  
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js?v=3346340368');
      });
    }
  </script>
  <script src="main.dart.js?v=3346340368" type="application/javascript"></script>
</body>
</html>

here is my pubspec yaml file这是我的 pubspec yaml 文件

name: weepay_web
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
 
  


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter

  firebase_core_web: ^0.2.1

  cloud_firestore: ^0.14.3


# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #   - images/a_dot_burr.jpeg
  #   - images/a_dot_ham.jpeg

  # An image asset can refer to one or more resolution-specific "variants", see
  # https://flutter.dev/assets-and-images/#resolution-aware.

  # For details regarding adding assets from package dependencies, see
  # https://flutter.dev/assets-and-images/#from-packages

  # To add custom fonts to your application, add a fonts section here,
  # in this "flutter" section. Each entry in this list should have a
  # "family" key with the font family name, and a "fonts" key with a
  # list giving the asset and other descriptors for the font. For
  # example:
  # fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  #   - family: Trajan Pro
  #     fonts:
  #       - asset: fonts/TrajanPro.ttf
  #       - asset: fonts/TrajanPro_Bold.ttf
  #         weight: 700
  #
  # For details regarding fonts from package dependencies,
  # see https://flutter.dev/custom-fonts/#from-packages

and here is my main.dart file这是我的 main.dart 文件

import 'package:flutter/material.dart';
import './pay_link.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
            initialRoute: "/home",

            routes: {
        "/home": (context) => Container(color:Colors.orange)
       
      },onGenerateRoute: (settings) {
          List<String> pathComponents = settings.name.split('/');
          if (pathComponents[1] == 'link') {
            return MaterialPageRoute(
              builder: (context) {
                return PayLinkScreen(payment_link:pathComponents.last);
              },
            );
          } else
            return MaterialPageRoute(
              builder: (context) {
                return Container(color:Colors.orange);
              },
            );
          
        },

      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
        // This makes the visual density adapt to the platform that you run
        // the app on. For desktop platforms, the controls will be smaller and
        // closer together (more dense) than on mobile platforms.
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
    );
  }
}

................................................................................................................................................................................... ................................................... ................................................... ................................................... .....................................

Answer 1

I would love to help you but could you share the error you get in the Chrome console log?我很乐意帮助您，但您能分享一下您在 Chrome 控制台日志中遇到的错误吗？

Usually, the problem is that you are using firestore and others but did not include them in the index.html.通常，问题是您正在使用 firestore 和其他但未将它们包含在 index.html 中。

For example:例如：

<!-- TODO: Add SDKs for Firebase products that you want to use
           https://firebase.google.com/docs/web/setup#available-libraries -->
      <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-analytics.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>

If you share more information on your error I could try to help you better but this is my first assumption.如果您分享有关错误的更多信息，我可以尝试更好地帮助您，但这是我的第一个假设。

More info you can find on https://firebase.google.com/docs/web/setup#available-libraries您可以在https://firebase.google.com/docs/web/setup#available-libraries上找到更多信息

After your additional info, I looked closer at your code and it seems that you do not add the scripts in the proper order.在您提供更多信息后，我仔细查看了您的代码，您似乎没有按正确的顺序添加脚本。

Please look at my standard Flutter Web App index.html:请看我的标准 Flutter Web App index.html：

<body>

  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
       https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-firestore.js"></script>



  <script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "XXXXXXXXXXXXXXX",
    authDomain: "xxxxxxx.firebaseapp.com",
    databaseURL: "https://xxxxxxx.firebaseio.com",
    projectId: "xxxx-id",
    storageBucket: "xxxxxxx.appspot.com",
    messagingSenderId: "XXXXXXXXXX",
    appId: "1:XXXXXXXX:web:XXXXXXXXXX",
    measurementId: "G-XXXXXXXXXXX"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>
 <script src="main.dart.js" type="application/javascript"></script>
</body>

So all the scripts are in the body not the head.所以所有的脚本都在身体而不是头部。

Flutter Web：javascript 未捕获引用错误：Firebase 未定义？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-11-11 08:30:45

Flutter Web：javascript 未捕获引用错误：Firebase 未定义？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-11-11 08:30:45

解决方案1
0 已采纳 2020-11-11 08:30:45