-1

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!

Raphael Bucher
  • 43
  • 2
  • 9
  • 2
    Here's a bit of a wild guess: you don't have a stylesheet for Firebase to serve, and you have it configured to serve the index page for 404s. Browser requests CSS, gets back a 200 success with the index page's HTML, boom, `Resource interpreted as Stylesheet but transferred with MIME type text/html` – Sidney Mar 07 '18 at 20:10
  • Double check your build files to make sure everything is there – Sidney Mar 07 '18 at 20:10
  • You can also use the Chrome devtools to inspect the network request and see what text content the browser got back. – Sidney Mar 07 '18 at 20:11
  • @Sidney Thank's for your help! I check it. – Raphael Bucher Mar 07 '18 at 20:12
  • @Sidney Well, the browser really gets the HTML back. I also checked my dist folder. Everything is in it. – Raphael Bucher Mar 07 '18 at 20:21
  • "*the browser really gets the HTML back*" that's the problem, it's expecting a stylesheet. I could try to give you more troubleshooting steps, but it would be better if you could add a link to your code so that we can take a look – Sidney Mar 07 '18 at 20:34
  • @Sidney Here's the link to the deployed firebase page: https://natalem-20.firebaseapp.com/ If you need more, I can create a repository with the whole project. Thank you very much for your help! It's appreciated. – Raphael Bucher Mar 07 '18 at 20:35
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166422/discussion-between-sidney-and-raphael-bucher). – Sidney Mar 07 '18 at 20:40

1 Answers1

0

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

Raphael Bucher
  • 43
  • 2
  • 9