Stylesheet Not Loading Because Mime Type Is Text/Html

"The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

Actually I had wrongly put href="", and hence the html file was referencing itself as the CSS. Mozilla had the similar bug once, and I got the answer from there.

Stylesheet not loaded because of MIME-type

The issue, I think, was with a CSS library starting with comments.

While in development, I do not minify files and I don't remove comments. This meant that the stylesheet started with some comments, causing it to be seen as something different from CSS.

Removing the library and putting it into a vendor file (which is ALWAYS minified without comments) solved the issue.

Again, I'm not 100% sure this is a fix, but it's still a win for me as it works as expected now.

Stylesheet not loading because MIME type is text/html

The stylesheet http://localhost:3000/src/css/component.css was not
loaded because its MIME type, “text/html”, is not “text/css”

Reason for the error is,

you are allowed to access only public directory when its served on browser, so

-> First ../src/css/ by this way you can't access the file , it will consider this as route and try to give you html

-> Second , This is not the proper way to include css files :

<link rel="stylesheet" type="text/css" href="../src/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../src/css/demo.css" />
<link rel="stylesheet" type="text/css" href="../src/css/component.css" />

---

Proper way to use the css file is like this ( from your react component js file ) :

import './css/component.css';

(react-scripts start) React will automatically convert your css file into js and applies it.

---

Still if you want to use css files outside of react, you need to put all css files inside public folder (good to put inside public/css)

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

If you still have doubts please read :

https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started

Hope, this will clear all your doubts.

Content is not loading because its MIME type, "text/html" is not "text/css"

I think problem might be server.js file cannot access properly build folder of the frontend/client. Can you delete all of this:

if (process.env.NODE_ENV == 'production') {
    app.use(express.static('client/build'));
    }
    
 app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});

And add this:

app.use(express.static(path.join(__dirname, './client/build')));

I assume your client folder and server.js file are at the same level, that's why it is ./client... If not, define path route accordingly. Please let me know if it works.

---

Related Topics