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

Matthew Published at Dev

Matthew

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:

Clear NPM Cache / Fresh Install
- npm verify cache
- rm -rf node_modules
- npm install
Clear Browser Cache
Various modifications to folder names and references to that
Adding/removing forward slashes form the href
Moving the css folder into the root and serving it from there
Adding/removing slashes from path.join(__dirname, '/static/')
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.

Matthew

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.