I have problem similar to this, except that I'm using polymer template from this.
I imported all polymerfire references both in the page where <firebase-app> is declared and in the page where <firebase-query> is used. Not working.
I found later that the template uses polymerfire which version is v0.9.4 instead of the latest v0.10.3. I tried uninstalling and re-installing the new version. Nothing changed.
For additional information, here's a snippet of the code:
src/app-auth/app-auth-firebase.html
<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-query.html">
...
<firebase-app name="pwa-demo" api-key="abc" auth-domain="abc" database-url="abc"></firebase-app>
<firebase-auth id="auth" app-name="pwa-demo" signed-in="{{_signedIn}}" user="{{_user}}"on-error="_onAuthError"></firebase-auth>
src/app-pages/app-page-new-stuff/app-page-new-stuff.html
<link rel="import" href="../../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../../../bower_components/polymerfire/polymerfire.html">
...
<firebase-auth user="{{user}}"></firebase-auth>
<firebase-query id="stuffquery" app-name="pwa-demo" path="/users/[[user.uid]]/events" data="{{events}}"> </firebase-query>
...
_onFormSubmit: function() {
this.$.stuffquery.ref.push({
title: this.$.piTitle.value
});
}
Is there anything else that I'm missing? Please help.
EDIT:
I found two other weird things, which might be helpful. First, I couldn't do both retrieving the data and pushing the data from and to my app. Second, when I attempt to run firebase.database() in browser console, I got "Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)."
Anyone?
After days of frustration, it works. Apparently.
TL;DR
What I did is updating polymerfire and omitting the name attribute from any firebase element.
Explanation
Looking at this, it seems firebase initializes the app in __computeApp method and name is an optional variable but will be used in initialization if it is provided. Ignore it and everything should be okay. In my case, it works both for <firebase-app>, <firebase-auth>, and <firebase-query> (for pushing data, because i'm still stuck in using firebase-query for fetching data)
While it works in my case, it might not necessarily the right solution. It might not work in your case. It took me days to figure it out so for those who are in similar problems, one of these might help:
Inspect firebase query attribute. Refer to this
Try import polymerfire/polymerfire.html in the same html file where <firebase-app> is declared. Refer to this
Update polymerfire. Simply uninstall and reinstall it might solve the case (for those with outdated version of polymerfire)
Omit name attribute from any firebase element. I know my <firebase-app> is successfully initialized when I type firebase.database() in browser console, it doesn't give error anymore.
Hope it helps.
Related
I am doing what I think is a standard Next.js build. It works fine in development mode but when I try to get a production build, I get:
(node:39333) UnhandledPromiseRejectionWarning: CssSyntaxError: <css input>:17:20: Missed semicolon
at Input.error (/node_modules/next/node_modules/postcss/lib/input.js:129:16)
But here is the strange things: I don’t have any CSS.
Actually, I had some CSS but I deleted it all to figure out what was going wrong. No change.
After an hour or so of frustration, I did what I should have done in the first 10 minutes, and edited the file postcss/lib/input.js to just print out the offending CSS, and got quite a surprise. Let me describe the sequence of events in the order they occurred, not the order I discovered them.
A few days ago, I received from the designer an HTML file with the layout she wanted. In the <head>, there were some <link>s to the fonts she had chosen, including:
<link
href="https://fonts.googleapis.com/css?family=FontAwesome"
rel="stylesheet"
/>
What I didn’t noticed (apparently the designer didn’t either) was that there is no such font-family (FontAwesome is the name of font toolkit), I dutifully copied the line into my React code. Next.js and the browser plowed right through the problem.
PostCSS did not. Instead, when attempting the production build, it tried to parse the error page that Google sent.
Unfortunately, the error page was, you know, just an error page. Nobody at Google had scrutinized it for strict standards-compliance. Sure enough, near the top I found:
body {
background: 100% 5px no-repeat;
margin-top: 0;
max-width: none:
That colon there at the end is supposed to be a semi-colon. Of course, removing the useless link to the nonexistent font solved the problem.
Now I don’t know who to blame:
Google for having a syntax error on an error page
Google for not running a check on their error pages
Google for returning a 400 instead of a 404 when it cannot find a font
PostCSS for trying to parse an error page (I don’t know if the 400/404 thing confused it, but still)
PostCSS for giving such an obscure error message
the designer for giving me a link to a bad font
Because, you know I am not blaming myself...
For people who couldn't still understand the issue or find out where's the mistake, check for any links like
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap"
rel="stylesheet"
/>
Please make sure your weights are in ascending order or else it will throw 400 error from google and still show the same error from PostCSS
Following code solved my problem.
Pre:
<link
href="https://fonts.googleapis.com/css2?family=Monserat:wght#300;400;500;900&display=swap"
rel="stylesheet"
/>
Post:
<link
href={`https://fonts.googleapis.com/css2?family=Monserat:wght#300;400;500;900&display=swap`}
rel="stylesheet"
/>
Try this in your Next.js app:
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Petrona"
rel="stylesheet"
/>
</Head>
Note that the only difference between your code and mine is: css2
I spent the last 5-6 days to migrate a relatively big, legacy Polymer 0.5 application to Polymer 2, and that was not a piece of cake.
Everything was successful in local. When deploying it online with the new version, I get a new surprise, the application's UI is broken and the console is filled with this type of messages:
Uncaught TypeError: Polymer is not a function
at iron-meta.html:125
at iron-meta.html:215
iron-icon.html:146 Uncaught TypeError: Cannot read property 'create' of undefined
at iron-icon.html:146
iron-iconset-svg.html:50 Uncaught TypeError: Polymer is not a function
at iron-iconset-svg.html:50
iron-pages.html:56 Uncaught TypeError: Polymer is not a function
at iron-pages.html:56
iron-image.html:145 Uncaught TypeError: Polymer is not a function
at iron-image.html:145
paper-card.html:167 Uncaught TypeError: Polymer is not a function
at paper-card.html:167
paper-toolbar.html:292 Uncaught TypeError: Polymer is not a function
at paper-toolbar.html:292
paper-ripple.html:440 Uncaught TypeError: Polymer is not a function
at paper-ripple.html:440
at paper-ripple.html:764
paper-button.html:170 Uncaught TypeError: Polymer is not a function
at paper-button.html:170
paper-checkbox.html:239 Uncaught TypeError: Polymer is not a function
at paper-checkbox.html:239
iron-overlay-backdrop.html:62 Uncaught TypeError: Polymer is not a function
at iron-overlay-backdrop.html:62
at iron-overlay-backdrop.html:166
iron-overlay-manager.html:48 Uncaught TypeError: Cannot read property 'add' of undefined
at new Polymer.IronOverlayManagerClass (iron-overlay-manager.html:48)
at iron-overlay-manager.html:382
And the list goes on. Errors of the type "Polymer is not a function" happen on this type of code:
<script>
(function() {
'use strict';
Polymer({ <=======
is: 'paper-toast',
What I can't understand first is from where the difference between the dev and production environments comes from.
In the Network tab, I can see that all vendor webcomponents are loaded in the same order and no requests are failing. It just doesn't work in prod, and that makes debugging complicated.
It is a Meteor app, with Blaze and Polymer (that's a bad cocktail, I know).
The code roughly looks like this:
imports.html (simplified)
<head>
<script>
window.Polymer = {
lazyRegister: true
};
</script>
<!-- Webcomponents Polyfill -->
<script src="/bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Polymer elements -->
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-layout/app-layout.html">
<link rel="import" href="/bower_components/iron-collapse/iron-collapse.html">
<!-- etc -->
</head>
app.html (application root view, simplified)
<template name="applicationLayout">
<app-drawer-layout>
<!-- Left title and menu -->
<app-drawer slot="drawer">
<app-toolbar></app-toolbar>
{{>menu}}
</app-drawer>
<!-- Main content, page, router yielder -->
<app-header-layout>
<app-header slot="header">
<app-toolbar>
<div>{{>topBarMenus}}</div>
</app-toolbar>
</app-header>
<div>{{>yield}}</div>
</app-header-layout>
</app-drawer-layout>
</template>
<template> and the mustache tags are Blaze things.
You can notice that I have no <body>, <html> or other includes (for Meteor, etc), this is really the only bootstrapping code of my app. I have no control on this. Meteor detects <head> and injects it, but creates the rest itself, inserts its stylesheets, etc. I can't create it myself. I know it's stupid. I don't like Meteor or Blaze either.
I know that Polymer recommends to put the application root in a <dom-module>, in another HTML file, loaded with an HTML import, etc, but I can't even do that (thanks to Meteor), nor I can rewrite the whole app (although I'd like to).
Is there a workaround? I mean, it's working in development. What could cause this? It happens in all browsers.
Well it seems that I was very tired that day, and after coming back to this problem two days later, I've found and fixed the problem in like, 20 minutes.
In my case, there was a missing webcomponent bower package in my bower.json. It was installed on my machine but forgot to save it (bower i -S) to the manifest. In production, it was therefore not installed.
In my particular case, my setup of Meteor sends 200 status codes with the index file when the requested file isn't found. That silenced the error I would normally have with a missing package. But it was making the Polymer initialization crash in a non-explicit manner.
The moral is:
Double check your packages!! Versions, peer dependencies, missing ones, etc.
When possible, use another package manager than Bower (too bad Polymer still depends on it) or npm, that are quite bad, and just use yarn.
I'm trying to start using Polymer with Meteor, but have seen the following behaviour that I can't explain.
To reproduce git clone https://github.com/JeremyKells/meteor-polymer-testing.git and run meteor.
This is just the app created with:
meteor create testpoly
and then adding the polymer components with bower:
bower install --save Polymer/polymer
bower install --save PolymerElements/iron-elements
bower install --save PolymerElements/paper-elements
and adding the section to the code .
As is this runs ok, but if you remove the comments around either of these two lines:
<!-- <link rel="import" href="/bower_components/paper-dropdown/paper-dropdown.html"> -->
<!-- <link rel="import" href="/bower_components/paper-dialog/paper-action-dialog.html"> -->
The app shows the normal meteor counter app twice like this:
http://i.stack.imgur.com/KAv7Z.png
Why is this happening? How do I stop this?
Further info following Guissouma's response. I'm running this on Ubuntu 15.04, and mainly testing with chrome. When the UI elements are duplicated, clicking either button only updates the second 'counter', the first count remains at zero.
And on Firefox in this same environment, there is just the one set of UI elements, but the button does not work.
i.stack.imgur.com/bqumz.png
Trying with both Safari and Chrome on iphone connecting to this server give same results as firefox: It looks ok, but the button doesn't update the count value.
I tested the project with meteor on windows, it works as expected! I remove the comments from headers.html The app shows the normal meteor counter app.
On ubuntu 15.0.4 with firefox the button seem not working, this is due to the js file webcomponents.js imported on headers.html file.
Try to comment this line on headers.html and test again.
<!-- <script src="/bower_components/webcomponentsjs/webcomponents.min.js"></script> -->
This was a case of getting the import links wrong, when changing from Polymer 0.5 to Polymer 1.0.
It should be:
<link rel="import" href="/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
While I'm still confused as to why this caused html tags to be duplicated, and why this doesn't throw an error in the browser, it all works when I get the code correct!
tl;dr
Make sure your bower dependencies for Polymer and PaperElements are up to date. (i.e. use #^1.0.0 instead of #1.0.0.)
Details
The root cause of this issue is two fold:
Meteor responds with the content of the main page even when there is no resource at the path request, but it does not use a 404 (Not Found) status code.
HTML imports will include a referenced document into the page unless the response is an error.
It doesn't even matter if you're using Polymer. The following Meteor app will exhibit the duplication behavior:
<head>
<link rel="import" href="bad-link.html">
</head>
<body>
I'm Duplicated!<br>
</body>
The solution is to make sure your HTML imports are valid.
In my case, paper-icon-button.html had an import for paper-behaviors/paper-radio-button-behavior.html which doesn't exist in the latest version of paper-behaviors.
The reason for the inconsistency is because paper-icon-button was locked at version #1.0.0 but its own bower dependencies referenced paper-behaviors#^1.0.0 which means the latest version >= 1.0.0 and < 2.0.0.
The solution was to change my bower dependencies versions to use the semver caret syntax as well.
{
"dependecies": {
"polymer": "Polymer/polymer#^1.2.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
}
}
I'm trying to make my meteor app visible to crawlers.
I've added the Spiderable package and installed Phantom.js.
When I to go localhost:3000/?_escaped_fragment_=, it's blank.
When I view the source, it's almost empty, and it ends right before the <script> tag that loads the Google Maps API:
<!DOCTYPE html><html><head>
<link rel="stylesheet" href="/eecc60f7c55db2915697d4beb05274f355ad19e4.css">
<title></title>
<!-- Google Maps -->
</head></html>
I haven't encountered any issues with this before, but it got me thinking that maybe I shouldn't be including custom <scrpit> (or <link>) tags in the app's <head>. If this is true - what is the correct way to load external assets? If it's not related to the issue, I'd appreciate any advice.
Thanks!
In relation to your first question, I am not 100% sure about this being the cause of your problem, but to answer the second, you shouldn't be including scripts/stylesheets in the head of your Meteor application.
Meteor combines all of the client-side js, css, and html for your app, and sends it all together to the client. This means you can just include your stylesheet and scripts in your app's client folder. I would try putting your stylesheets/scripts in the correct place and removing the links in your head and see if that solves your issue.
You can find more detailed descriptions of meteor here.
I am very confused, I just started to work on the CSS for my ASP.NET MVC4 website and I don't fully understand what is happening.
Currently my mobile layout works but any changes to it causes one strange effect after another. (e.g. the forms not being displayed to the ajax-loader.gif constantly being displayed.)
I have the following in .Layout.Mobile.cshtml
#Styles.Render("~/Content/Mobile/css", "~/Content/jquerymobile/css")
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile-1.2.0.css" />
<link rel="stylesheet" href="~/Content/Mobile/css/jquery.mobile.theme-1.2.0.css" />
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
I have modified the BundleMobileConfig.cs in App_start as follows:
// bundles.Add(new StyleBundle("~/Content/Mobile/css")
// .Include("~/Content/Site.Mobile.css"));
//kludge is the above wrong...and the following needed??
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/"));
I don't understand why this is NOT the default for this bundle?
Here are my questions / problems:
If you will note the stylesheets, I should not need to include the three explicit links, they should come from the bundles. But if delete any of them the site breaks.
Why won't the modified ~/Content/Mobile/css bundle pull up these css files?
For the script files I have looked at the code.jquery.com and I don't understand why I need these. My local code is the latest (i.e. jquery-1.9.1.js and jquery.mobile-1.2.0.js
I would expect that the version 1.9.1 shoud be able to replace the 1.7.1 without
problems, but it doesn't
The jquery.mobile.min.js should only be switching between a release and debug
vesion, which should not cause a problem, but it does.
I have used firebug to view what files are being loaded and I see that when I use just
the Render of the bundles without the explicit includes I don't get the files included, why not? I have read about bundles and it seems like I should just get the bundled files.
Can any one shed some light on what is happening and point me to a tutorial so I can learn
how to use how to debug CSS and bundles. I have read several and I find firebug very
useful, but I have no idea where to look next.
Try replacing your bundle code with this.
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/jquery.mobile*"));
This should load your files without explicitly doing so.
Your right this did work! Thanks....
The strange thing is that the following did not work:
bundles.Add(new StyleBundle("~/Content/Mobile/css")
.Include("~/Content/Site.Mobile.css",
"~/Content/Mobile/css/jquery.mobile-{version}.js",
"~/Content/Mobile/css/jquery.mobile.theme-{version}.js",
"~/Content/Mobile/css/jquery.mobile.structure-{version}.js",
"~/Content/Mobile/css/"));
I understand why your example works...but don't understand why mine doesn't ... unless the version tag does not work like I expect it to....
Also I found out the jquery 1.9.1 is much different from 1.7.1 for this I had to do the following:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jquerymobile")
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-migrate-1.1.1.js"></script>
<script src="~/Scripts/jquery.mobile-1.2.0.js"></script>
this works....using your example I will figure out a wild card pattern to include this as well.