Node/Express - Refused to apply style because its MIME type ('text/html')

Question

I\'ve been having this issue for the past couple of days and can\'t seem to get to the bottom of this. We doing a very basic node/express app, and are trying to serve our st

Answer 1

Though the answer has to do with a space in the file, I have another potential answer that also generates the same error code. I'm posting it here as it also brings up this common error that gets a lot of looks.

The alternative is the misplacement of the styles.css file. If it is not present where it is referenced, Chrome will spit out the same error code.

I've had an instance of the styles.css being in an express js's "public" folder but not in the actual "css" sub-folder in "public." (public was used as the static folder.)

If you use VS Code, your document view in the left pane has this weird visual display that can fool you into thinking the styles.css is in the "css" folder when in fact it is not. I only discovered the issue after using normal windows explorer and seeing the missplaced file. To fix, check and if missplaced, just put styles.css where it should be.

Hope this helps others too!

Answer 2

The problem is the result of an improperly named file. Our student had a space at the end of the style.css file. There were a few tip offs to this, the first was a lack of syntax highlighting in the text editor, and the second was the text editor detecting the filetype for other newly created css files but not the improperly named file. Removing the space resolved the issue.

Thank you slebetman for your help in pointing me in the right direction.

Answer 3

This is not a solution for your question but this might help someone else searching for solution like me. if you use app.get like below:

app.get(express.static(path.join(__dirname,"public")));

change it to :

app.use(express.static(path.join(__dirname,"public")));

Answer 4

I had the same issue today. My file structure is in such a way that all static files have each their folder inside the public folder. The public folder itself is in the root directory. I tried using relative paths e.g ../public/css/index.css etc but no luck. Here is what I did.

const app = express();
app.use(express.static("public"));

With this, your app will look for static files inside the public folder. So assuming you have css and js files in there, you can directly reference them in HTML as below:

href="css/index.css"
src="js/script.js"

Answer 5

In Nodejs app with express, we need to add the line like below to tell the server about the directory

app.use(express.static(__dirname));

This will solve the problem of CSS not rendering