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.
See Question&Answers more detail:
os 
