Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Firebase gist not displaying UI properly #1946

Closed
RedBrogdon opened this issue Jul 1, 2021 · 12 comments
Closed

Firebase gist not displaying UI properly #1946

RedBrogdon opened this issue Jul 1, 2021 · 12 comments
Assignees
Labels
P1 A high priority bug; for example, a single project is unusable or has many test failures
Milestone

Comments

@RedBrogdon
Copy link
Contributor

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)
@RedBrogdon RedBrogdon added P1 A high priority bug; for example, a single project is unusable or has many test failures firebase labels Jul 1, 2021
@RedBrogdon RedBrogdon added this to the On Deck milestone Jul 1, 2021
@srawlins
Copy link
Member

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

@srawlins
Copy link
Member

@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
Copy link
Member

@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
Copy link

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
Copy link
Member

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

@puf
Copy link

puf commented Jul 29, 2021

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
Copy link
Member

This looks like it's blocked by #2038.

@johnpryan
Copy link
Contributor

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
Copy link
Member

Thanks @johnpryan

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

@srawlins
Copy link
Member

Firebase JS SDK may not be inclined to support connecting from within an iframe. firebase/firebase-js-sdk#123

@mosuem
Copy link
Member

mosuem commented Mar 8, 2024

@RedBrogdon is this still a P1 issue?

@johnpryan
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
P1 A high priority bug; for example, a single project is unusable or has many test failures
Projects
None yet
Development

No branches or pull requests

7 participants