Search code examples
javascriptfirebasestylesheetmime-typesparceljs

Firebase "Resource interpreted as Stylesheet but transferred with MIME type text/html"

I created a web app (just some HTML, SCSS and JavaScrip) and bundled it with parcel. When I run the app on localhost (served by parcel), everything works totally fine. But as soon as I start it on the firebase localhost, the CSS is not working. I get this error:

Resource interpreted as Stylesheet but transferred with MIME type text/html

Does anyone have an idea, how to solve this?

Thanks for your help!

Solution

  • Sidney was wright with his wild guess. The link to the stylesheet and the images weren't correct in the bundled index.html. Parcel referred to the dist folder, where he should have referred directly to the files. I was able to manually change the links from

    <link rel="stylesheet" href="/dist/natalem-20.css">

    to

    <link rel="stylesheet" href="/natalem-20.css">

    And then everything worked out fine.

    Because Firebase wasn't able to find the correct stylesheet, he just sent back the HTML as .css - file. Because of that, there was no 404-error in the console but the warning

    Resource interpreted as Stylesheet but transferred with MIME type text/html

    So to fix the problem, just change the path in the bundled index.html or (what I'm gonna do now) is to figure out, how to change this over the Parcel config.

    Thanks a lot to Sidney for the help! Props to you!

    Sincerely yours,

    Raphael