Mime Type Error with Express.Static and CSS Files

MIME type error with express.static and CSS files

The MIME Type Error is happening because the file served is likely a "404 Not Found" page made by Express, because it couldn't locate the CSS file. The browser expects a CSS file, gets an HTML file and says the MIME Type doesn't fit.

app.use(express.static('/static'));

means that the static files are served literally from /static. In a Unix-Based Operating System, this is a direct child to the directory root /. I don't think you do, but you shouldn't store files, let alone publicly accessible files in that directory. Instead what you are probably looking for is the static directory in your App's directory.

This is how you can tell express to use that one to server files:

app.use(express.static(__dirname + "/static"));

If you can't include a file in your HTML always double, or better even tripple check, that the file can be accessed through the browser first.

Also, the files are then located in ... href="/...", not ... href="/static/..."

MIME type error for local CSS or JS prevents loading custom styles when working with NodeJs

When serving static files (like images, css, etc.) it is usually best practice to place those files in a dedicated directory called public or static, or whatever you like. Then you need explicitly tell your express app to serve files from there like so:

app.use(express.static(__dirname + '/public'));

So your server.js becomes:

const express = require('express');
const app = express();
const PORT = 8080;
const path = require('path');

app.use(express.static(__dirname + '/public'));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'views', 'index.html'));
})

app.listen(PORT);

And then you can call your CSS file like this in your index.html:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="public/style.css" />
  </head>
  <body> 
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Node won't allow CSS because MIME type text/html is not a supported stylesheet

None of these links will load the CSS file

Yes, the problem is the MIME type associated with the file, changing the link won't change the MIME type. Except if you serve a different route with a different MIME type for the same file (do you ?).

The MIME type of interest here is text/css.

You need to change the header of your HTTP request before sending it.

You can do this with express by setting the options when calling sendFile() :

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

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.

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.

Express error: Strict MIME type checking is enforced for module scripts per HTML spec

The statement

import Home from "./views/Home"

leads to the request GET /static/js/views/Home (without .js suffix), which the static middleware cannot serve. But now the next middleware takes over and responds with the index.html file (with Content-Type: text/html). That's why you see a 200 OK status, but the browser complains about the wrong content type.

With

express.static(path.resolve(__dirname, 'frontend', 'static'),
  {extensions: ["js"]});

you would instruct the static middleware to silently add the .js suffix.

Mime Type Error with Express.Static and CSS Files