Does not show 404 page and console Errors appear when deployed to Firebase Hosting
johnlim opened this issue · comments
Description
Generated a psk2 app using polymer init
.
When deployed to firebase as documented, the 404 page does not load and there are console errors
Expected outcome
404 page should load for invalid
pages and there should not be console errors.
Actual outcome
404 page does not show and there are console errors.
Live Demo
https://test-psk2-ba2b0.firebaseapp.com
Steps to reproduce
- Open dev console
- Navigate to https://test-psk2-ba2b0.firebaseapp.com/view22
-
at HTMLElement._initializeProperties (element-mixin.html:1) at HTMLElement.<anonymous> (property-accessors.html:1) at template-stamp.html:1 at fe (property-effects.html:1) at s (element-mixin.html:1) at MyApp (my-app.html:1)```
displayed in console.
4) Click view1 menu item in app-drawer, more errors are displayed:
my-app.html:1 Uncaught TypeError: Cannot read property 'instanceCount' of undefined
at HTMLElement._initializeProperties (element-mixin.html:1)
at HTMLElement.<anonymous> (property-accessors.html:1)
at template-stamp.html:1
at fe (property-effects.html:1)
at s (element-mixin.html:1)
at MyApp (my-app.html:1)
_initializeProperties @ element-mixin.html:1
(anonymous) @ property-accessors.html:1
(anonymous) @ template-stamp.html:1
fe @ property-effects.html:1
s @ element-mixin.html:1
MyApp @ my-app.html:1
iron-selectable.html:1 Uncaught TypeError: Cannot read property 'dashToCamelCase' of undefined
at HTMLElement._valueForItem (iron-selectable.html:1)
at HTMLElement._indexToValue (iron-selectable.html:1)
at HTMLElement._activateHandler (iron-selectable.html:1)
at HTMLElement.<anonymous> (template-stamp.html:1)
at Object._fire (gestures.html:1)
at Object.forward (gestures.html:1)
at Object.click (gestures.html:1)
at HTMLElement._handleNative (gestures.html:1)
_valueForItem @ iron-selectable.html:1
_indexToValue @ iron-selectable.html:1
_activateHandler @ iron-selectable.html:1
(anonymous) @ template-stamp.html:1
_fire @ gestures.html:1
forward @ gestures.html:1
click @ gestures.html:1
_handleNative @ gestures.html:1
app-drawer-layout.html:1 Uncaught TypeError: Polymer.dom is not a function
at HTMLElement._clickHandler (app-drawer-layout.html:1)
at HTMLElement.<anonymous> (template-stamp.html:1)
_clickHandler @ app-drawer-layout.html:1
(anonymous) @ template-stamp.html:1
iron-location.html:1 Uncaught TypeError: Polymer.dom is not a function
at HTMLElement._getSameOriginLinkHref (iron-location.html:1)
at HTMLElement._globalOnClick (iron-location.html:1)
at HTMLBodyElement.<anonymous> (template-stamp.html:1)
_getSameOriginLinkHref @ iron-location.html:1
_globalOnClick @ iron-location.html:1
(anonymous) @ template-stamp.html:1
Navigated to https://test-psk2-ba2b0.firebaseapp.com/view1
Browsers Affected
- [x ] Chrome
- Edge
- Firefox
- IE 11
- Safari 8
- Safari 9
This error is often seen when a redirection error causes my-app.html
to be loaded from inside itself, it isn't deduped because it's a server redirection error and the browser thinks it's actually a different file.
You would fix this by adding the pattern for lazy imports (src/my-*.html
) as an exclusion when rewriting nonexistent pages to index.html
.
@jsilvermist I'm getting the same error...how do you mean 'adding the pattern for lazy imports'? How should I do that?
@Mikebarson Firebase rewrites work on an in-order basis, so with an example of:
{
"source": "!/__/**",
"destination": "/index.html"
},
{
"source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
"destination": "/index.html"
}
The first rewrite is catching all url's which don't exist and redirecting them to /index.html
, this causes a URI such as /view33
to cause a HTTP request to index.html
with an identifier of my-view33.html
.
While it's actually importing index.html
again, the browser only see's that you imported a new file called my-view33.html
so it's not properly deduplicated.
To fix this you can simply remove the first rule keeping only:
{
"source": "**/!(*.js|*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
"destination": "/index.html"
}
This method will rewrite requests such as /view33
, but not /view33.html
.
Alternatively, you could redirect any nonexistent html page to index.html
, unless it matches my-*.html
for missing lazy views. (I use the pattern <PREFIX>-view-*.html
to denote a lazy view.):
{
"source": "**/!(*.js|my-*.html|*.css|*.json|*.svg|*.png|*.jpg|*.jpeg)",
"destination": "/index.html"
}
There's a related PR which simplifies the documentation for this here: Polymer/old-docs-site#2324
The docs have now been updated - https://www.polymer-project.org/2.0/start/toolbox/deploy.