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 :

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.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

Leave a reply