Question 173492 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Blocked because of disallowed mime type ("text/html")

I am aware there are many questions regarding this topic, but after extensive looking there was only one Firebase example and it didn’t cover my scenario with using hosting.

I have an app that I am currently testing in Firebase hosting, the app goes through the data retrieval process well enough with data coming in fine on first page entry.

When I go to refresh the page in order to test that the cache we are using retrieves the data properly, the entire app goes blank and I receive the errors shown below

enter image description here

After some looking into if similar example have already been asked, I found out that the errors in the console dont necessarily point to the actual issue, making this all the more confusing. In order to help the reader I will include the vite and firebase config files to show the project is connected fine. I will also add the index.html in my dist folder to show the .js file mentioned in the error.

enter image description here

enter image description here

enter image description here

enter image description here

One thing I did notice while checking my cloud functions on the backend is that the function that retrieves the detail information is only hit once on the first successful load. When I refresh, it doesn’t get hit again, which gives me the idea it may be something related to the router, but I haven’t worked out what the issue there might be besides the docId that’s passed as a prop not being available.

I am able to refresh any page where I don’t pass the docId as a prop as well, but some confusion I have is I’m not able to replicate the error I’m getting on localhost. There, I am able to refresh fine anywhere without issues at all. Any idea what the problem here is? I am using Vue 3 with Vite and Firebase.

Tags:

2

Answers


  1. 0

    The problem here is your "rewrites", which causes every route to be served index.html. Then since FireFox is nosniff by default, it fails when your resources all have content type text/html.

    In your specific case, visit /assets/index.659db071.js and press CTRL+u to view source. Notice it’s your index.html file and not the JavaScript it should be.

    Login or Signup to reply.
  2. 0

    As covered by @BrownieInMotion’s answer, your rewrite rule for "source": "**" is redirecting all non-existent files to your main /index.html file. Because ./assets/index.659db071.js does not exist on your deployed app (at time of writing, the current version is ./assets/index.2b83c04b.js), the browser gets sent the content of /index.html instead (a text/html file). This causes the error you are seeing.

    To correct your rewrite rule, so that it doesn’t redirect for anything in the /assets folder, you should update your firebase.json file to the following:

    {
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**",
    ],
    "rewrites": [
      {
        "source": "!/@(assets|images)/**",
        "destination": "/index.html"
      }
    ]
  }
}

    Here any file in the "assets" (make sure its the same as build.assetsDir) or "images" (included to show how to specify multiple folders) folders won’t be redirected to /index.html and will instead be shown your configured 404 error page.

    Additionally, your index.html should probably be updated to refer to /assets/index.****.js instead (note missing . at the start) so that it always refers to https://example.com/assets/index.****.js instead of improperly handling nested paths such as https://example.com/renter-team-profile/assets/index.****.js in your error in the question. Unfortunately, I’m not familiar enough with Vite to know where the setting for this is.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search