未捕获的SyntaxError：标识符'baseUrl'已被声明

Question

I have a Polymer webapp deployed using Firebase hosting.

The routing between views works but the error page handling is not.

I have succeeded to reproduce the issue on a minimal example using the official polymer-2-starter-kit example:

https://fir-polymer-404-issue.firebaseapp.com/

For instance, if you open the following URL, the error page is not displayed:

https://fir-polymer-404-issue.firebaseapp.com/not-existing

Instead, I get the error below:

my-not-existing.html:56 Uncaught SyntaxError: Identifier 'baseUrl' has already been declared
    at my-not-existing.html:56
(anonymous) @   my-not-existing.html:56

The configuration file firebase.json used for the previous example is here:

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

I would like to have the error page handling made by Polymer.

Please note that the same app served by polymer serve works properly.

It seems the problem comes from the Firebase hosting configuration. All traffic is redirected to index.html so when Polymer load a not-existing page, the Firebase server returns an HTTP 200 response. Unfortunately, I have no idea how to fix the problem.

I have tried to create a redirection for non-404 responses only with the following configuration file:

{
  "hosting": {
    "public": ".",
    "redirects": [
      {
        "source": "**",
        "destination": "/index.html",
        "type": 200
      }
    ]
  }
}

Unfortunately, the type property can be used for 3xx code only:

Error: HTTP Error: 400, hosting.redirects[0].type is not one of enum values: 301,302,303,304,305,307,308

Please also note that a custom 404.html file is placed at the root .

The only solution I see is to list all existing routes (per file) but it looks just crazy.

Any idea is welcome.

Answer 1

The reason neither firebase or polymer is going to handle your 404 page is that when you request a non-existing page, it's not only going to return with the status code 200 but it's also going to return with the HTML of the index page, so it will display something, although that something is really nothing.

Now the way polymer is set up it looks for views in the src folder, so you want a rewrite just on the root and not in the src folder. So change your firebase.json to be

{
    "hosting": {
        "public": ".",
        "rewrites": [{
            "source": "/*",
            "destination": "/index.html"
        }]
    }
}

The single * will mean files but not subfolders, this will allow your routeing to work if you enter it in the address bar but if the page is not found the 404 will be handled by polymers routeing. I've set up a firebase application using the polymer starter pack to for an example.

https://testforsoissue.firebaseapp.com/view2

Will work and will take you to view2 as the initial request will be rewritten to return index.html but the request for /src/my-view2.html will not

Whereas a route that is not defined

https://testforsoissue.firebaseapp.com/not-existing

Will throw a 404 (in polymer) as the initial request will again be rewritten to return index.html but the request for /src/my-not-existing.html will not and will happily throw a 404!

PS the reason for the error 'baseUrl' has already been declared' is due to the fact the page was using the index.html twice which declares the baseUrl at the top

Edit

If you have subpaths seems like you can use the firebase.json like so

{
    "hosting": {
        "public": ".",
        "rewrites": [{
            "source": "!/src/*",
            "destination": "/index.html"
        }]
    }
}

Answer 2

As per documentation , you do not need to do the handling; just create a 404.html:

You can specify a custom 404/Not Found error to be served when a user tries to access a page that does not exist. Simply add a 404.html page to the your project's public directory and the contents of this page will be displayed when Firebase Hosting needs to display a 404 Not Found error to the user.

---

To avoid the baseUrl error, if you have access to this line of code:

let baseUrl = document.querySelector('base').href;

Try changing it for:

baseUrl = baseUrl || document.querySelector('base').href;

It's not very neat, but it should not complain about the value being defined already.

Although I think this is unrelated to your problem and may stop showing this error once a proper 404 page is defined.