search

FirebaseExtended / polymerfire

Polymer Web Components for Firebase
https://www.webcomponents.org/element/firebase/polymerfire
MIT License
459 stars 142 forks source link

Documentation not clear about imports #217

Open alexpirine opened 7 years ago

alexpirine commented 7 years ago

Hello,

I failed many times at integrating polymerfire, always ending up with the this.$.auth.signInWithPopup is not a function error.

I think that these README instructions are a bit misleading:

<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="bower_components/polymerfire/firebase-auth-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-database-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-storage-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-messaging-script.html">

I basically spent my whole working day figuring out that I also need to import the following (in case I need all of the features):

<link rel="import" href="bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="bower_components/polymerfire/firebase-database.html">
<link rel="import" href="bower_components/polymerfire/firebase-storage.html">
<link rel="import" href="bower_components/polymerfire/firebase-messaging.html">

Now it seems quite obvious, but the -script part didn't really catch my attention, so I didn't realize that I wasn't actually importing the component, but just some JavaScript.

Anyway, even if this issue doesn't go through to the documentation, hopefully it will be indexed and save someone time.

justweb1 commented 7 years ago

@alexpirine The js need to be called in the correct order or there will be errors. There is already a PR on the firebase/firebase-js-sdk repo to fix this issue. Also, if using polymerfire you only need to import the html files. They will automatically import the -script files. Make sure you include firebase-app.html to your imports. What readme file did you reference that mentions the -script imports?

Import Order

auth database app storage messaging

alexpirine commented 7 years ago

Hi @justweb1, I am referencing the README file of this repo, that is also reproduced as documentation on https://www.webcomponents.org/:

https://github.com/firebase/polymerfire/blob/master/README.md

The readme states that you need to do all required imports before declaring <firebase-app>:

<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="bower_components/polymerfire/firebase-auth-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-database-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-storage-script.html">
<link rel="import" href="bower_components/polymerfire/firebase-messaging-script.html">

<firebase-app
  database-url="..." storage-bucket="..." api-key="..." messaging-sender-id="..." auth-domain="...">
</firebase-app>

I mistakenly thought that since all the required imports were already made, I could directly use the new components, like <firebase-auth>, without any additional imports.

The README is not clear enough that in order to use <firebase-auth>, you still need to import bower_components/polymerfire/firebase-auth.html.

This didn't caught my attention for a while, because I didn't notice that there was a difference between bower_components/polymerfire/firebase-auth.html and bower_components/polymerfire/firebase-auth-script.html.

I believe that this might seem obvious to people who are already familiar with Polymer, but maybe not to the novices. 😺

justweb1 commented 7 years ago

I can see how that could be confusing. You have to remember that webcomponents are designed to work with js libraries other than polymer. If you see that there is a change to the docs that can make them easier to understand you can submit a pull request.