Firebase gist not displaying UI properly

[RedBrogdon]

This gist does not display its UI when run:

https://dartpad.dev/f3d57a133b61f88aa938e480e1d57e9b?null_safety=true

There's a Debug banner that appears in the iframe, but no other output. The DartPad console displays a "Script error" message, and there's a generic message in the browser console:

dart_sdk.js:6676 Uncaught Error: Assertion failed: file:///Users/brettmorgan/Documents/GitHub/dart-services/flutter-sdk/packages/flutter/lib/src/widgets/framework.dart:2539:20
_debugCurrentBuildTarget == context
is not true
    at Object.throw_ [as throw] (dart_sdk.js:5041)
    at Object.assertFailed (dart_sdk.js:4980)
    at flutter_web.js:337735
    at framework.BuildOwner.new.buildScope (flutter_web.js:337739)
    at RenderObjectToWidgetAdapter.new.attachToRenderTree (flutter_web.js:326164)
    at binding$.WidgetsFlutterBinding.new.attachRootWidget (flutter_web.js:326036)
    at flutter_web.js:326030
    at internalCallback (dart_sdk.js:24253)

[srawlins]

@RedBrogdon this came from Frank, right? A talk or a workshop? Do we know whether this works in Flutter Web, outside DartPad?

[srawlins]

@goderbauer helped me debug, and we found that the dartfire.Database db = dartfire.database(); line in _MyHomepageState.initState() is causing a problem; if you wrap that line in a try/catch, you can see the following error: (for some reason, Flutter swallows the error):

NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.database'
at Object.database$ [as database] (<anonymous>:4459:101)
at main._MyHomePageState.new.initState (<anonymous>:900:28)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343165:54)
at framework.StatefulElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at framework.StatelessElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.StatelessElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.StatelessElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.StatelessElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.StatelessElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.StatelessElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at framework.StatefulElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.StatefulElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343191:13)
at framework.StatefulElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343184:29)
at framework.StatefulElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.StatefulElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.StatefulElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343191:13)
at framework.StatefulElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343184:29)
at framework.StatefulElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at _InheritedNotifierElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at _InheritedNotifierElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at _InheritedNotifierElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at _InheritedNotifierElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at _InheritedNotifierElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at _InheritedNotifierElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.SingleChildRenderObjectElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.SingleChildRenderObjectElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.SingleChildRenderObjectElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:327839:33)
at framework.StatefulElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.StatefulElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343191:13)
at framework.StatefulElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343184:29)
at framework.StatefulElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.InheritedElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.InheritedElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.InheritedElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.InheritedElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.InheritedElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.InheritedElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.InheritedElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.InheritedElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.InheritedElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.InheritedElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.InheritedElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.InheritedElement.new.mount (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343035:28)
at framework.StatefulElement.new.inflateWidget (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215128:16)
at framework.StatefulElement.new.updateChild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:214993:25)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343071:35)
at framework.StatefulElement.new.performRebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343191:13)
at framework.StatefulElement.new.rebuild (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:215471:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343039:12)
at framework.StatefulElement.new.[_firstBuild] (https://storage.googleapis.com/nnbd_artifacts/2.14.0-301.2.beta/flutter_web.js:343184:29)
...

[srawlins]

@RedBrogdon This makes me wonder if we're miissing a top-level object which is loaded via JS interop. Right now, Dart pad only loads in firebase-app.js and firebase-auth.js. Might something else be needed?

@goderbauer was able to launch the app without issues in Flutter Web (outside DartPad) with just these two JS SDKs, so probably a false trail.

Is this an older style of FlutterFire, using firebase.dart instead of firebase_core.dart and cloud_firestore.dart?

[goderbauer]

Actually, I had the following scripts in my index.html:

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>

Maybe dartpad IS missing the firebase-database.js to make this work?

[srawlins]

Oh ho! Thanks for following up. This may be an easy fix. Will check ASAP.

[puf]

On the questions about an older style: the firebase.dart library is a pure Dart implementation predating FlutterFire, and only support Auth and RTDB. Since FlutterFire's RTDB plugin doesn't support web yet, the firebase.dart package is the only option to use RTDB in Dartpad (and Flutter web in general).

For Googlers, this link clarifies this in more details: go/firebase-flutter-cross-platform

[srawlins]

This looks like it's blocked by https://github.com/dart-lang/dart-pad/issues/2038.

[johnpryan]

I closed #2038, which is a separate CORS issue I think.

Here's the CORS exception I see when I run the gist in the issue description:

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at chrome-extension://noondiphcddnnabmjcihcjfbhfklnnep/content_script_compiled.js:32:44
BrowserPollConnection.ts:519 Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
    at Function.lt.createIFrame_ (https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js:1:32333)
    at new lt (https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js:1:34441)
    at n (https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js:1:28093)
    at st.open (https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js:1:29290)
    at https://www.gstatic.com/firebasejs/8.4.1/firebase-database.js:1:39985

[srawlins]

Thanks @johnpryan

I found we may need the allow-same-origin policy on our iframes.

[srawlins]

Firebase JS SDK may not be inclined to support connecting from within an iframe. https://github.com/firebase/firebase-js-sdk/issues/123

[mosuem]

@RedBrogdon is this still a P1 issue?

[johnpryan]

This is probably out of date since we don't currently have Firebase support.