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

16
votes

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 static files using something like this:

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

This does what I expect it to for the most part. We have a few folders in our static folder for our css and javascript. We're trying to load our css into our EJS view using this static path:

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

When we hit our route /, we're getting all of the content but our CSS is not loading. We're getting this error in particular:

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

What I've tried:

  1. Clear NPM Cache / Fresh Install
    • npm verify cache
    • rm -rf node_modules
    • npm install
  2. Clear Browser Cache
  3. Various modifications to folder names and references to that
  4. Adding/removing forward slashes form the href
  5. Moving the css folder into the root and serving it from there
  6. Adding/removing slashes from path.join(__dirname, '/static/')
  7. There was a comment about a service worker possibly messing things up in a github issue report, and seemed to fix a lot of people's problems. There is no service worker for our localhost: https://github.com/facebook/create-react-app/issues/658
    • We're not using react, but I'm grasping at any google search I can find

The route:

app.get("/", function(req, res) {
    res.render("search");
});

The view:

<!DOCTYPE html>
<html>
    <head>
        <title>Search for a Movie</title>
        <link rel="stylesheet" type="text/css" href="/static/css/style.css">
    </head>
    <body>
        <h1>Search for a movie</h1>
        <form method="POST" action="/results">
            <label for="movie-title">Enter a movie title:</label><br>
            <input id="movie-title" type="text" name="title"><br>
            <input type="submit" value="Submit Search">
        </form>
    </body>
</html>

The package.json:

{
  "name": "express-apis-omdb",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js",
    "lint:js": "node_modules/eslint/bin/eslint.js ./ ./**/*.js --fix; exit 0",
    "lint:css": "node_modules/csslint/cli.js public/css/; exit 0"
  },
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^6.0.4",
    "csslint": "^0.10.0",
    "eslint": "^2.11.1",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.1",
    "eslint-plugin-jsx-a11y": "^1.3.0",
    "eslint-plugin-react": "^5.1.1"
  },
  "dependencies": {
    "body-parser": "^1.18.2",
    "dotenv": "^5.0.0",
    "ejs": "^2.5.7",
    "express": "^4.13.4",
    "morgan": "^1.7.0",
    "path": "^0.12.7",
    "request": "^2.83.0"
  }
}

The project structure:

-app
--node_modules
--static
---img
---css
---js
--views
---movie.ejs
---results.ejs
---search.ejs
--index.js
--package-lock.json
--package.json

Note: We are currently not using a layout file for our EJS.

I'm happy to provide additional details if needed.

7
node.jsexpressmime-typesstatic-files
All the debugging steps you've done assumes the browser is not receiving the css file (you're assuming something is wrong with the path). But actually the exact opposite happens - the browser receives the css file but refuse to treat it as css. You can verify this by trying to open the css URL directly in the browser (it should display your css source code). What's happening instead is that express.static is serving the css file as html its MIME type ('text/html'). Debug from there – slebetman
Google around to figure out how express.static determines file types – slebetman
I'm not putting my comments as an answer because I know what the problem is but not the solution. You have to figure out the solution – slebetman
What does your static router looks like, and have you try using express.static? – Felix Fong
Thank you all for your input, specifically slebetman. The student had a space at the end of the css file /style.css . I should have noticed this from the lack of syntax highlighting in the css file. – Matthew

7 Answers

9
votes

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.

5
votes

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

3
votes

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")));
1
votes

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!

1
votes

Extra Tip :

I have the same issue like this but my issue is when I try to render a static file from one level router path it working properly

Example: site.com/posts

But when I try to render static files from a route like site.com/posts/:id It's not working.

The solution is to add '/' beginning fo the href :

Wrong : <link href="css/bootstrap.min.css" rel="stylesheet">

Solution :<link href="/css/bootstrap.min.css" rel="stylesheet">

1
votes

OP has posted the solution for his scenario.

For others, this error comes when the node server cannot find the stylesheet file (or any file) in the specified path inside the app.use() middleware. Example:

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

When you use the above middleware, the express server searches for the files from this (static/ in this case) directory. If you have given the stylesheet path as:

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

Then the express server will look in the path static/css/style.css. If the file is not present here, the reported error will be thrown.

0
votes

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"