Stylesheet not loading because MIME type is text/html

Question

While running a MERN app on firefox, got this error in browser console and css is not loaded: The stylesheet http://localhost:3000/src/css/component.css was not loaded because its MIME type, “text/html”, is not “text/css”

I am adding CSS to index.html like this :

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

Where am I going wrong ?

What are the other ways to add external css for sections apart from the React components ?

Code is Here

Quay

Will you please share the folder structure and where component.css file is ? – Pompous

Code is here : https://gitlab.com/menkudle/MERN-CommentBox – Quay

Answer 1

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.

Pompous

Adding import './css/component.css' to index.js, will that css be applied to the whole page apart from the particular React component that we are rendering – Quay

This fixed the issue with Angular. I tried to link the CSS, rather than letting the component bring it in. Removing the link from index.html solved the problem. – Ruiz

Answer 2

You have to check that file exist on server. I found the reason, because there are no file (or missing) when upload source code to the server. So when the css file not found, server returns html MIME type

Empower

Answer 3

Im using MiniCssExtractPlugin and i realized missing '.' will caused below issue.

from

filename: '/style.[contenthash].css'

to

filename: './style.[contenthash].css'

//correct way should be like this

new MiniCssExtractPlugin({
  publicPath: './sass/',
  filename: './style.[contenthash].css'
});

Hope this help you.

Whelan

Answer 4

I moved the folder css and js to public directory and referenced the component.css as

<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/component.css" />

It worked for me..

Any Better way ??

Quay

Answer 5

If use Middleware in next you should be used "matcher" because every request it passes through the Middleware .

Use

'/((?!api|_next/static|_next/image|favicon.ico).*)',

https://nextjs.org/docs/messages/middleware-upgrade-guide

Surratt