Node/Express - Refused to apply style because its MIME type ('text/html')
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 cacherm -rf node_modulesnpm 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.
Answer
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.