18

I'm using Express and NodeJS. In my server.js file I have this piece of code:

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

And subsequently in my static directory, I have a CSS folder, and then a style.css file. In my index.html, I link to the sheet like so:

  <link rel="stylesheet" type="text/css" href="/static/css/style.css">

However, in my test environment I continue to get this error:

Refused to apply style from 'http://localhost:3500/static/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I am sure that my path name in my tag is right, and I'm confused to why I'm getting this error.

Do I need to declare that CSS files be processed as CSS and not HTML? Am I not doing that when I say type="text/CSS"? If not, what do I need to put into my server file to remedy this issue?

4 Answers 4

16

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

2
  • 5
    And if you want the files to be in the url /static/.. instead of /.. then use app.use("/static", express.static(__dirname + "/static")); instead. Nov 3, 2018 at 18:47
  • 1
    "The MIME Type Error is happening because the file served is likely a '404 Not Found' page" -- this opened my eyes! I was so blinded by the error that I didn't realise the problem was actually something entirely different. Jul 29, 2021 at 15:07
2

I know this question is old, but wanted to add my two cents with a simple example as I took a while to figure out the issue.

Working Example:

My files are located under /usr/noah

/usr/noah/index.js

const express = require('express')
const path = require('path')
const app = express()
const port = 8080

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

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

app.listen(port, () => {
    console.log('Listening on port: ' + port)
});

/usr/noah/static/index.html

<html>

<head>
    <link rel='stylesheet' href='style.css' type='text/css'>
</head>

<body>
    <div id='main'>
        <h1>Hello World</h1>
    </div>
</body>

</html>

/usr/noah/static/style.css

#main {
    margin: 3em;
    padding: 1em;
    border: 1px solid gray;
    border-radius: 10px;
}

h1 {
    color: blue;
}

Then I'm running this from /usr/noah with the following command: node index.js

The Explanation

I tend to do better with examples, so that's above. To explain what went wrong, see below:

app.use(express.static('public')) This is used in a lot of express documentation. It works great as alanionita mentioned, only if your server is at the root of the filesystem. As you can tell, I'm two layers deep at /usr/noah.

Changing this to the Working Example app.use makes sure your files are served from the right directory, in this case /usr/noah/static.

0

I had the same error, but it was caused by a not machting case. I wrote in my HTML file:

<script src = "./myScript.js"></script>

But the actual filename was MYSCRIPT.js. I didn't noticed that, because when I open the HTML file locally, browsers seem to ignore this and import even files where the cases not match.

0

As other posters have said this is rarely and 'actual' MIME type issue.

Usually it's a combination of badly defined public / static file config and poorly liked files.

Answer

Example file structure

// file structure
public/
  assets/
    css/
      stylesheet.css
    images/
      avater.jpeg
  js/ 
    main.js
controllers/
  user
    createUser.js
    readUser.js
models/
  User.js
  index.js
views/
  layouts/
    main.handlebars
  homepage.handlebars
server.js
app.js

Basic serving of files from /public

From the Express docs here : https://expressjs.com/en/starter/static-files.html

app.use(express.static('public'))

This will only work if our server is at the root of the filesystem, which for servers is fine - for anything else, not so much.

Dynamic link to /public

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

This will build up the path to public from the directory name of the node app.

It will allows us to place the project folder anywhere on the drive without getting in the way of the runtime.

Using files from /public

// homepage.handlebars
<section>
</section>
<script src="/js/main.js"></script>

Explanation is provided in the above Express docs.

// Sample of file paths created by public/
http://localhost:3000/js/main.js

This means that when we link to that file we only have to add the / prefix to our files / folders.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.